# css 属性选择器
# 1. [attr]
说明：
- 存在 attr 属性
示例：
// 有 href 属性的 a 元素
a[href] {
color: red;
}
# 2. [attr=value]
说明：
- 存在 attr 属性，并且属性值为 value
示例：
a[href='#'] {
color: red;
}
# 3. [attr~=value]
说明：
- 存在 attr 属性，并且属性值为空格分隔的列表，其中有个值为 value
示例：
// <a class="link danger">xx1</a> // 匹配
// <a class="link-danger">xx2</a> // 不匹配
a[class~='danger'] {
color: red;
}
# 4. [attr^=value]
说明：
- 存在 attr 属性，并且属性值以 value 打头
示例：
// <button class="icon-home">xx1</button> // 匹配
// <button class="button icon-about">xx2</button> // 不匹配
button[class^="icon"] {
color: red;
}
# 5. [attr$=value]
说明：
- 存在 attr 属性，并且属性值以 value 结尾
# 6. [attr*=value]
说明：
- 存在 attr 属性，并且属性值里包含 value
# 7. 参考
上一篇: 下一篇:
本章目录