CSS属性选择器详解
编程小白也能看懂的大白话教程
存在选择器 [attribute]
[attribute] { 样式规则 }
大白话解释： 选择所有具有指定属性的元素，不管这个属性的值是什么。
实用场景： 给所有具有title属性的元素添加提示样式。
示例：给所有可点击元素添加样式
普通div
有title
普通div
有title
CSS规则: [title] { background-color: #2ecc71; color: white; }
等于选择器 [attribute=”value”]
包含单词选择器 [attribute~=”value”]
[attribute~=”value”] { 样式规则 }
大白话解释： 选择属性值中包含独立单词（空格分隔）的元素。
实用场景： 根据CSS类中的特定单词设置样式，或根据title中的关键词设置样式。
示例：根据状态关键词设置样式
默认
警告中
成功
活动警告
CSS规则: [status~="warning"] { background-color: #f1c40f; }
开头匹配选择器 [attribute|=”value”]
[attribute|=”value”] { 样式规则 }
大白话解释： 选择属性值等于指定值或以指定值开头后面紧跟连字符的元素。
实用场景： 匹配语言代码（如en, en-US, en-GB）。
示例：匹配特定语言开头的元素
lang=”fr”
中文
中文(简体)
西班牙语
CSS规则: [lang|="zh"] { background-color: #9b59b6; color: white; }
开头子串选择器 [attribute^=”value”]
结尾子串选择器 [attribute$=”value”]
包含子串选择器 [attribute*=”value”]
[attribute*=”value”] { 样式规则 }
大白话解释： 选择属性值中包含指定子字符串的元素（任意位置）。
实用场景： 匹配包含特定关键词的元素，如包含”error”的类名。
示例：标记包含”error”的元素
status=”info”
error-msg
validation-error
status=”success”
CSS规则: [class*="error"] { background-color: #e74c3c; color: white; }
大小写敏感选择器 [attribute=”value” i]
[attribute=”value” i] { 样式规则 }
大白话解释： 在选择属性值时不区分大小写（字母大小写不敏感）。
实用场景： 使选择器更灵活，忽略属性值的大小写差异。
示例：匹配不同大小写的值
image
IMAGE
video
ImAgE
CSS规则: [data-type="image" i] { background-color: #2ecc71; color: white; }
使用技巧与注意事项：
- 属性选择器可以与其他选择器组合使用，如
div[class^="box-"] - 多个条件可以组合：
[href][target="_blank"]选择同时满足两个条件的元素 - 属性选择器支持所有HTML属性，包括自定义的data-*属性
- 在现代浏览器中，属性选择器性能良好，可以放心使用
- 大小写敏感性选择器 (i) 在CSS4中引入，在IE中不被支持