文章目录
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 属性选择器的使用，如有问题欢迎私信和评论