属性选择器

属性选择器让 CSS 根据属性是否存在或属性值匹配元素，适合处理表单状态、链接类型和数据标记等稳定条件。

input[required] { outline: 2px solid orange; }
a[href^="https://"] { color: seagreen; }
[data-state="error"] { border-color: crimson; }

[attr] 匹配属性存在，[attr=value] 匹配完整值，^=、$= 和 *= 分别匹配开头、结尾和包含，~= 与空格分隔的词匹配，|= 适合语言或连字符前缀。属性值匹配可能受大小写规则和 HTML 属性规范影响，不要把字符串选择器当作业务状态管理。

实验与练习

给链接、输入框和自定义 data-state 添加不同属性值，用开发者工具确认每种运算符的匹配集合。改变一个属性值，记录样式何时消失；再说明什么时候应该改用类名或脚本状态。

可运行微实验：从匹配到胜出

在一个页面中保留三个同名元素，给它们同时设置类型、类、属性和伪类规则。先在 Elements 的 Matched CSS Rules 记录“命中但未胜出”的声明，再只改变一个条件：元素增加类、属性值改变、祖先增加类或规则移入另一层。每次只记录匹配集合、特异性/层级和最终 computed value，避免把“选择器没命中”和“命中了但被覆盖”混为一谈。

<p class="notice" data-state="error">消息</p>
<style>p { color: gray } .notice { color: navy } [data-state="error"] { color: crimson }</style>

常见错误

• 用 *= 匹配过宽的字符串，误伤其他值。
• 依赖浏览器自动生成的属性值格式。
• 让 CSS 属性选择器承担复杂业务逻辑。

继续阅读

下一篇根据用户操作和结构状态匹配元素：伪类：状态与结构。

练习

1. 用最小输入复现“属性选择器”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案