前端必知必会-CSS 属性选择器

---

CSS 属性选择器

使用特定属性设置 HTML 元素的样式
可以设置具有特定属性或属性值的 HTML 元素的样式。

CSS [attribute] 选择器

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

以下示例选择具有目标属性的所有 <a> 元素：

示例

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

CSS [attribute=“value”] 选择器

[attribute=“value”] 选择器用于选择具有指定属性和值的元素。

以下示例选择具有目标=“_blank” 属性的所有 <a>元素：

示例

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

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” 的元素。

CSS [attribute|=“value”] 选择器

[attribute|=“value”] 选择器用于选择具有指定属性的元素，其值可以是指定的值，也可以是指定的值后跟连字符 (-)。

注意：值必须是整个单词，可以是单独的单词，如 class=“top”，也可以后跟连字符 (-)，如 class=“top-text”。

示例

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

CSS [attribute^=“value”] 选择器

[attribute^=“value”] 选择器用于选择具有指定属性的元素，其值以指定值开头。

以下示例选择所有具有以“top”开头的类属性值的元素：

注意：值不必是整个单词！

示例

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

CSS [attribute$=“value”] 选择器

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

以下示例选择所有具有以“test”结尾的类属性值的元素：

注意：值不必是整个单词！

示例

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

CSS [attribute*=“value”] 选择器

[attribute*=“value”] 选择器用于选择属性值包含指定值的元素。

以下示例选择所有类属性值包含“te”的元素：

注意：该值不必是整个单词！

示例

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

设置表单样式

属性选择器可用于设置没有类或 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 属性选择器的使用，如有问题欢迎私信和评论