CSS Handbook · 选择器

第二章 / 2.3 属性选择器

第二章 · 2.3 节

属性选择器

属性选择器根据元素的 HTML 属性及其取值来匹配元素，无需额外添加类名，在处理表单、链接、多语言等场景时尤为高效。

存在与精确匹配

语法含义
[attr]拥有该属性，无论取值
[attr="value"]属性值完全等于 value
 
[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
[type="checkbox"] {
  accent-color: #8a5a2e;
}

模糊匹配系列

语法含义示例
[attr^="v"]以 v 开头[href^="https"]
[attr$="v"]以 v 结尾[href$=".pdf"]
[attr*="v"]包含 v（子串）[class*="col-"]
[attr~="v"]以空格分隔的词列表中包含 v[class~="active"]
[attr|="v"]等于 v，或以 "v-" 开头[lang|="zh"]
 
/* 外链自动加图标 */
a[href^="http"]::after {
  content: " ↗";
}

/* PDF 链接标红 */
a[href$=".pdf"] {
  color: #b3452c;
}

大小写敏感

默认情况下属性值匹配是大小写敏感的（HTML 属性本身除外）。在选择器末尾加上 i 可以忽略大小写，加上 s 则强制区分大小写。

[data-status="Done" i] {
  color: #3f5d54;
}
/* 匹配 Done / done / DONE ... */

实战：文件类型图标

属性选择器很适合根据链接后缀批量添加视觉标记，无需为每种文件类型手写类名：

a[href$=".zip"]::before { content: "🗜 "; }
a[href$=".pdf"]::before { content: "📄 "; }
a[href$=".png"], a[href$=".jpg"]::before { content: "🖼 "; }
提示属性选择器不参与 DOM 结构判断，只看属性值，因此性能开销与类选择器基本相当，可以放心在大型项目中使用。