CSS 属性选择器

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

1. CSS [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 <a> 元素;

范例

a[target] {
  background-color: yellow;
}

2. CSS [attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 <a> 元素:

范例

a[target="_blank"] { 
  background-color: yellow;
}

3. CSS [attribute~="value"] 选择器

[attribute~="value"] 选择器选取属性值包含指定词的元素。

下例选取 title 属性包含 "flower" 单词的所有元素:

范例

[title~="flower"] {
  border: 5px solid yellow;
}

上面的例子会匹配以下属性的元素:title="flower"、title="summer flower" 以及 title="flower new",但不匹配:title="my-flower" 或 title="flowers"。

4. CSS [attribute|="value"] 选择器

[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 "top" 开头的所有元素:

注释:值必须是完整或单独的单词,比如 class="top" 或者后跟连字符的,比如 class="top-text"。

范例

[class|="top"] {
  background: yellow;
}

5. CSS [attribute^="value"] 选择器

[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 "top" 开头的所有元素:

提示:值不必是完整单词!

范例

[class^="top"] {
  background: yellow;
}

6. CSS [attribute$="value"] 选择器

[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。

下例选取 class 属性以 "test" 结尾的所有元素:

提示:值不必是完整单词!

范例

[class$="test"] {
  background: yellow;
}

7. CSS [attribute*="value"] 选择器

[attribute*="value"] 选择器选取属性值包含指定词的元素。

下例选取 class 属性包含 "te" 的所有元素:

提示:值不必是完整单词!

范例

[class*="te"] {
  background: yellow;
}

8. 设置表单样式

若需为不带 class 或 id 的表单设置样式,属性选择器会很有用:

范例

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

提示:请访问我们的 CSS 表单教程,学习如何用 CSS 设置表单样式的更多知识。

9. 所有 CSS 属性选择器

选择器 例子 例子描述
[attribute] [target] 选择带有 target 属性的所有元素。
[attribute=value] [target=_blank] 选择带有 target="_blank" 属性的所有元素。
[attribute~=value] [title~=flower] 选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value] [lang|=en] 选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value] a[href^="https"] 选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value] a[href$=".pdf"] 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value] a[href*="aizws"] 选择其 href 属性值包含子串 "aizws" 的每个 <a> 元素。

下一章:如何添加 CSS

当浏览器读到样式表时,它将根据样式表中的信息来格式化 HTML 文档。1. 三种使用 CSS 的方法:有三种插入样式表的方法:外部 CSS、内部 CSS、行内 CSS。2. 外部 CSS:通过使用外部样式表,您只需修改一个文件即可改变整个网站的外观!