属性选择器是 CSS 选择器体系中极具实用价值的一类选择器，它的核心能力在于能够根据 HTML 元素身上携带的属性以及属性值来进行精确匹配。在网页开发中，HTML 元素的属性承载了大量元数据信息，比如链接的 href 地址、图片的 alt 描述、表单控件的 type 类型，以及开发者自定义的 data 属性等。通过属性选择器，我们可以在不额外添加类名或 id 的前提下，直接基于这些属性本身的存在与否或具体取值来设定样式。这种选择方式使得 CSS 与 HTML 的语义结构结合得更加紧密，也为我们提供了更丰富的样式控制维度。本文将从存否和值选择器、子字符串匹配选择器以及大小写敏感性三个维度，系统性地剖析属性选择器的使用方法与实战技巧。
一、存否选择器：根据属性存在与否匹配元素
属性选择器的最基础形式是存否选择器，它用一对方括号包裹属性名称，不关心属性的具体值是什么，只检查该属性是否存在于元素身上。这种选择方式在实际开发中有许多巧妙的应用场景。以超链接为例，a 标签的 title 属性通常用于提供悬停提示信息，如果页面中某些链接设置了 title 而另一些没有，我们就可以利用存否选择器专门为那些带有提示信息的链接添加视觉标识，比如一条虚线下划线或者一个特殊的图标，让用户一眼就能分辨出哪些链接可以获取更多说明信息。这种写法将样式的触发条件建立在了语义信息的有无之上，而不是依赖手动的类名标注。
css
a[title] {
text-decoration: underline dotted;
cursor: help;
}在这段代码中，选择器 a[title] 会匹配文档中所有携带 title 属性的 a 元素。方括号内部的 title 就是被检查的属性名，整个方括号结构紧跟在元素类型选择器之后，形成一个组合条件。当浏览器解析这条规则时，它会遍历所有 a 元素，逐一检查它们的属性列表中是否包含名为 title 的项，只有满足条件的元素才会被应用虚线型下划线和帮助型光标样式。这种存否选择器的特点是绝对二元化，要么有该属性，要么没有，中间没有任何模糊地带。同样的思路可以应用到其他场景中，比如 img[alt] 可以用来区分那些认真填写了替代文本的图片，input[disabled] 则可以选中所有被禁用的表单控件并统一置灰处理。
二、精确值选择器：锁定属性值完全相等的元素
当存否判断不够用时，我们可以进一步要求属性值必须精确匹配某个指定的字符串。精确值选择器的语法是在方括号内用等号连接属性名和目标值，目标值需要用引号包裹。这种选择器的匹配逻辑非常严格，属性值必须与引号中的字符串完全一致，多一个字符、少一个字符或者大小写不同都无法匹配。这种严格性在某些场景中是必要的，比如你想要精准地选中所有指向特定域名的外部链接，或者只想匹配表单中类型为 password 的输入框。需要注意的是，对于 class 属性这种可以包含多个值（用空格分隔）的属性，精确值选择器要求整个属性字符串完全匹配，而不是只匹配其中的某一个类名。
css
li[class="a"] {
background-color: yellow;
}在这个例子中，li[class="a"] 只会在某个 li 元素的 class 属性值恰好就是字符串 "a" 的时候才生效。如果某个列表项的 class 属性是 "a b"，即它同时拥有两个类名，那么这条规则将不会匹配到它。这是因为 "a b" 作为一个整体并不等于 "a"。精确值选择器的这种特性在需要对属性值进行身份核验式的严格匹配时非常有用，但同时也提醒我们，在面对多值属性时，如果目标是匹配其中某一个独立的值，应该考虑使用后面即将介绍的值列表匹配选择器，而不是精确值选择器。
三、值列表匹配选择器：匹配空格分隔属性值中的特定值
HTML 规范中，某些属性天然支持以空格分隔的形式携带多个值，最典型的例子就是 class 属性。一个元素可以同时拥有多个类名，它们之间用空格隔开，共同构成 class 属性的完整值。针对这种多值场景，CSS 提供了波浪号加等号的组合选择器 ~=，它能够检查属性值列表中是否包含某个指定的单词。与精确值选择器 = 不同，~= 选择器会将属性值按空格切分成多个独立的片段，然后逐一比对，只要其中任何一个片段与目标值完全匹配，选择条件就成立。这使得我们可以轻松地为属于某一类的元素设置样式，而不需要关心它是否同时还有其他的类名。
css
li[class~="a"] {
color: red;
}这段代码中的选择器 li[class~="a"] 会匹配所有 class 属性值列表中包含单词 "a" 的 li 元素。如果某个列表项的 class 是 "a"，它会被匹配；如果 class 是 "a b"，即它同时属于 a 类和 b 类，它同样会被匹配。但需要注意的是，如果 class 是 "ab"，即 "a" 和 "b" 没有用空格分开而是连在一起，那么这个属性值中并不存在一个独立的单词 "a"，该元素就不会被匹配。这正是 ~= 与子字符串匹配的本质区别，它是基于单词边界的匹配，而非简单的字符序列包含关系。这种语义在需要针对某个特定类名进行样式控制时十分精确，避免了对那些碰巧包含相同字符序列但含义不同的类名的误伤。
四、前缀连字符匹配选择器：处理语言子标签等分层属性值
有一类特殊的属性值以连字符作为层级分隔符，比如 HTML 中的 lang 属性。语言标签的格式通常为 "zh-CN" 或 "en-US" 这样的形式，主体语言代码在前，区域子标签在后，中间用连字符连接。为了能够灵活匹配这类带有层级结构的值，CSS 提供了 |= 选择器，它可以匹配那些属性值恰好等于目标值，或者以目标值开头且紧跟着一个连字符的情况。这种匹配方式专为处理子代码匹配而设计，在编写需要根据页面语言或区域进行差异化样式的国际化网站时尤其有用。它不会匹配那些属性值恰好以目标字符串开头但没有连字符分隔的情况，从而保证了匹配的语义准确性。
css
div[lang|="zh"] {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}在这个例子中，div[lang|="zh"] 会匹配 lang 属性值为 "zh" 的 div 元素，也会匹配 lang 属性值为 "zh-CN"、"zh-TW"、"zh-HK" 等任何以 "zh-" 开头的元素。这意味着只要该区域内容被标记为某种中文变体，无论简体还是繁体，都会应用我们指定的中文字体栈。如果页面上还有一个 lang 属性为 "zhang" 的元素，它不会被匹配，因为 "zhang" 虽然在字符序列上以 "zh" 开头，但它后面跟的不是连字符，不符合 |= 的匹配规则。这种精细的分界处理使得语言相关的样式控制既灵活又准确，开发者不必为每一种中文区域子标签分别书写规则。
五、开头子字符串匹配选择器：灵活匹配属性值的前缀模式
当我们需要更自由地进行子字符串匹配，而不局限于空格分隔的单词或连字符分隔的层级结构时，就可以借助 = 选择器。这个选择器使用脱字符加等号的组合，能够检查属性值是否以某个指定的子字符串开头。它的匹配逻辑比 |= 更宽松，不要求开头子字符串之后必须紧跟连字符，只要属性值的起始字符序列与目标值一致即可。这种灵活性使得 = 在实际开发中的应用范围非常广泛，最典型的场景之一就是匹配那些遵循特定命名约定的 CSS 类名。例如，一个组件库可能会使用 box-warning、box-error、box-success 这样的类名来标记不同类型的提示框，用 [class="box-"] 就可以一次性选中所有这些变体。
css
li[class^="a"] {
font-size: 120%;
}这段代码中的选择器 li[class^="a"] 会匹配所有 class 属性值以字母 "a" 开头的 li 元素。在列表项中，class 为 "a" 的第一项会被匹配，class 为 "ab" 的第二项同样会被匹配，因为 "ab" 的起始两个字符就是 "a"。但 class 为 "bca" 的第三项虽然包含了字母 "a"，却并非以 "a" 开头，因此不会被选中。这种前缀匹配的能力在组织大型项目中的 CSS 类名时极为有用，你可以通过统一的前缀来标识某一类组件或某一功能模块，然后利用 ^= 选择器为它们批量应用共享的基础样式。
六、结尾与任意位置子字符串匹配选择器：覆盖更多匹配场景
与前缀匹配 ^= 相对应，CSS 还提供了后缀匹配选择器 = 和任意位置包含匹配选择器 ∗ = 。 = 和任意位置包含匹配选择器 *=。 =和任意位置包含匹配选择器∗=。= 选择器使用美元符号加等号的组合，专门检查属性值是否以指定的子字符串结尾。这种匹配方式在处理文件扩展名、URL 后缀或者某些特殊的命名约定时非常便捷。而 *= 选择器使用星号加等号的组合，它的匹配条件最为宽松，只要属性值的任意位置出现了目标子字符串就算匹配成功，不管是在开头、中间还是结尾。这两种选择器与 ^= 一起，构成了完整的子字符串匹配三角，覆盖了字符串比较的三种基本模式。
css
li[class$="a"] {
background-color: yellow;
}
li[class*="a"] {
color: red;
}第一条规则使用 li[class$="a"]，会匹配 class 属性值以字母 "a" 结尾的 li 元素。如果列表中有四项，class 分别为 "a"、"ab"、"bca" 和 "bcabc"，那么第一项和第三项会被匹配到，因为它们的 class 值分别以 "a" 结尾，而第二项以 "b" 结尾，第四项以 "c" 结尾，都不符合条件。第二条规则使用 li[class*="a"]，它会匹配 class 属性值中任意位置包含字母 "a" 的所有 li 元素，也就是上面例子中的全部四项。*= 的匹配粒度最粗，在使用时需要特别注意避免意外的匹配扩散，但它的便利性也让它在很多快速开发场景中成为首选工具。
七、大小写敏感性控制：用 i 标记实现不区分大小写的匹配
在默认情况下，CSS 属性选择器对属性值的大小写是敏感的，这符合 HTML 的语义规范。然而在某些场景中，属性的值可能由用户输入生成，或者来自不同的后端系统，大小写的不一致性难以完全避免。为了应对这种情况，CSS 属性选择器提供了一个特殊的标记 i，将它放在闭合方括号之前，可以强制浏览器以不区分大小写的方式对 ASCII 字符进行匹配。这意味着选择器中的目标字符串和元素上的实际属性值在比较时，大写字母和小写字母会被视为等同。这个特性在需要稳健处理用户生成内容或外部数据时显得格外实用。
css
li[class^="a" i] {
background-color: yellow;
}在这段代码中，选择器 li[class^="a" i] 中的 i 标记位于方括号内部的末尾，紧贴在引号之后。它告诉浏览器在进行前缀匹配时忽略大小写差异。因此，不仅 class 为 "a" 和 "ab" 的列表项会被匹配，class 为 "A" 或者 "About" 这样以大写字母 A 开头的项也同样会被选中。如果没有这个 i 标记，大写 A 和小写 a 在匹配时将被视为不同的字符，导致以大写 A 开头的属性值无法被检测到。这个标记仅对 ASCII 字母的大小写转换有效，在处理包含 Unicode 字符的属性值时，浏览器的实现可能存在差异，使用时需稍加注意。此外，还有一个与之对应的 s 标记，用于在那些默认不区分大小写的上下文中强制启用大小写敏感匹配，但该标记目前浏览器的支持度有限，在实际项目中应用较少。
还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！