第二章 · 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 结构判断，只看属性值，因此性能开销与类选择器基本相当，可以放心在大型项目中使用。

Chapter 2 · Section 2.3

Attribute Selectors

Attribute selectors match elements by their HTML attributes and values, without requiring extra class names — especially handy for forms, links, and multilingual scenarios.

Existence and Exact Matching

Syntax	Meaning
[attr]	Has the attribute, whatever its value
[attr="value"]	The attribute value exactly equals value

[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
[type="checkbox"] {
  accent-color: #8a5a2e;
}

Fuzzy Matching

Syntax	Meaning	Example
[attr^="v"]	Starts with v	[href^="https"]
[attr$="v"]	Ends with v	[href$=".pdf"]
[attr*="v"]	Contains v (substring)	[class*="col-"]
[attr~="v"]	Contains v in a space-separated word list	[class~="active"]
[attr\|="v"]	Equals v, or starts with "v-"	[lang\|="zh"]

/* auto-add an icon to external links */
a[href^="http"]::after {
  content: " ↗";
}

/* mark PDF links in red */
a[href$=".pdf"] {
  color: #b3452c;
}

Case Sensitivity

By default, attribute value matching is case-sensitive (except for HTML attribute names themselves). Adding i at the end of the selector ignores case, while adding s forces case sensitivity.

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

In Practice: File Type Icons

Attribute selectors are great for adding visual markers in bulk based on link suffixes, without hand-writing a class per file type:

a[href$=".zip"]::before { content: "🗜 "; }
a[href$=".pdf"]::before { content: "📄 "; }
a[href$=".png"], a[href$=".jpg"]::before { content: "🖼 "; }

TipAttribute selectors do not look at the DOM structure, only attribute values, so their performance cost is about the same as class selectors — feel free to use them in large projects.