在编写页面样式时，我们常常遇到这样的需求：页面里有一批普通按钮，但只有带特定标记的按钮才需要特殊外观。如果给每个目标都加class，既繁琐又容易漏。CSS属性选择器提供了一条更直接的路，它让你根据元素自带的属性以及属性值来命中节点，从而把样式精准投送到目标上。
一、属性选择器的基本语法
CSS属性选择器以方括号作为标识，写在标签名之后或直接独立使用。最简单的写法是只判断属性是否存在，例如 input[disabled] 会选中所有带disabled属性的输入框，而不关心它的值是什么。这种写法常用于置灰态样式控制。
如果需要进一步限制属性值，就要用到等式或模糊匹配符号。最常见的完全匹配是 [type="text"]，它要求属性值必须与引号内字符串完全一致。注意这里的引号推荐使用双引号，如果属性值本身含有空格，也必须用引号包裹，否则整条规则会被浏览器忽略。
/* 存在属性即可命中 */
a[target] {
color: red;
}
/* 完全匹配属性值 */
input[type="password"] {
border: 1px solid #999;
}
/* 模糊匹配：以某值开头 */
a[href^="https://"] {
background: yellow;
}
二、通过属性值精准选中的多种方式
除了完全匹配，CSS还提供了一系列符号来处理属性值的局部特征。 [attr^="val"] 表示属性值以val开头，适合区分协议或命名空间； [attr$="val"] 表示以val结尾，常用来选中特定后缀的文件链接； [attr*="val"] 则表示属性值中任意位置包含val，适合关键词命中。
另外还有波浪号等号 [attr~="val"] 和竖线等号 [attr|="val"]。前者要求属性值是用空格分隔的单词列表且其中一个等于val，后者用于选中以val开头后接连字符的值，多用于语言代码如 lang|="en"。理解这些差异，才能避免把包含关系误写成完全匹配。
<!-- 示例结构 --> <a href="https://ipipp.com" target="_blank">外链</a> <a href="/page.html">内链</a> <img src="logo.png" alt="site logo" />
/* 选中所有外链 */
a[href^="https://"] {
padding-left: 18px;
}
/* 选中png图片 */
img[src$=".png"] {
border: none;
}
/* 选中alt中包含logo的元素 */
img[alt*="logo"] {
opacity: 0.9;
}
三、实际应用与性能注意点
在表单场景中，属性选择器可以免去为每种输入类型单独写class。比如用 input[type="email"]:invalid 配合属性选择器，就能对邮箱框的非法输入给出提示，而不影响其他输入框。对于引入的第三方组件，如果对方没暴露class钩子，用属性选择器覆写其内联结构也很有效。
不过属性选择器虽好，也不要滥用。浏览器匹配属性选择器时需要读取元素的属性表，复杂页面里大量使用 *[attr*="x"] 这类通配加模糊匹配，会增加渲染开销。建议尽量把标签名写在前面缩小范围，如用 button[data-role="submit"] 代替单纯 [data-role="submit"]，既清晰又高效。
| 语法 | 含义 | 适用场景 |
|---|---|---|
| [attr] | 存在该属性 | 状态标记，如disabled |
| [attr="v"] | 完全等于v | 精确类型区分 |
| [attr^="v"] | 以v开头 | 协议、前缀筛选 |
| [attr*="v"] | 包含v | 关键词模糊命中 |
四、常见错误与排查
初学者常把HTML标签名称和属性选择器搞混。比如想选中输入框，应写 input[type="text"] 而不是把input当成属性。还有人在值里用了中文引号或没转义特殊字符，导致选择器失效。若规则没起作用，可先到浏览器开发者工具里看该元素属性原始值，再比对选择器写法。
另一个坑是属性值大小写。HTML属性值多数不区分大小写，但CSS属性选择器在多数情况下是区分的。如果 [type="Text"] 写成了大写，可能选不中 type="text" 的节点。需要不区分时，可用 [type="text" i] 添加i标志，这是CSS4引入的忽略大小写匹配，现代浏览器均已支持。
/* 忽略大小写匹配 */
[class="Box" i] {
outline: 2px dashed #333;
}
整体来看，CSS属性选择器是一组低成本、高精度的样式命中工具。只要理清存在判断、完全匹配与模糊匹配的区别，并在真实项目里结合具体标签使用，就能用很少的代码解决以往需要堆class的麻烦事。