CSS 属性选择器的详细用法

CSS 属性选择器允许你根据元素的属性及其值来选择 HTML 元素。这在没有类名或 ID 的情况下非常有用，尤其适用于动态生成的内容或第三方组件。

一、属性选择器速查表

二、用法示例

1. [attr] —— 存在性选择器

选择拥有指定属性的元素，不管属性值是什么（包括空值）。

<a href="#">链接</a>
<img src="image.jpg" alt="">
<div data-id></div>

/* 选中所有带有 href 属性的 a 元素 */
a[href] {
  color: blue;
}

/* 选中所有带有 data-id 属性的 div */
div[data-id] {
  border: 1px solid red;
}

✅ 适用场景：为所有带 title 的元素添加提示样式；为所有可点击的按钮统一加 cursor。

2. [attr=value] —— 精确匹配

仅当属性值完全等于指定值时才匹配。

<input type="text">
<input type="submit">
<button type="submit">提交</button>

/* 只选中 type="submit" 的 input */
input[type="submit"] {
  background: green;
  color: white;
}

⚠️ 注意：区分大小写。[type="Submit"] 不会匹配 type="submit"。

3. [attr~=value] —— 包含独立单词（空格分隔）

匹配属性值中包含由空格分隔的单词之一等于 value 的元素。

<div class="btn primary large"></div>
<div class="btn secondary"></div>

/* 匹配 class 中包含 "primary" 单词的 div */
div[class~="primary"] {
  background: gold;
}

🔍 本质是模拟了类选择器的行为（.primary 等价于 [class~="primary"]）。
❌ 不匹配：class="my-primary"（因为不是独立单词）。

4. [attr|=value] —— 语言前缀匹配

匹配属性值等于 value 或以 value- 开头的元素。常用于 lang 属性。

<p lang="en">English</p>
<p lang="en-US">American English</p>
<p lang="fr">Français</p>

/* 匹配 lang="en" 或 lang="en-*" */
p[lang|="en"] {
  font-family: Arial, sans-serif;
}

✅ 典型用途：为不同语言区域设置字体或排版规则。

5. [attr^=value] —— 前缀匹配

匹配属性值以指定字符串开头的元素。

<a href="https://example.com">外部链接</a>
<a href="/about">内部链接</a>

/* 外部链接添加图标 */
a[href^="http"] {
  background: url(external-icon.png) no-repeat right center;
  padding-right: 16px;
}

/* 内部链接（以 / 开头） */
a[href^="/"] {
  color: #007bff;
}

💡 常用于识别协议（http://, mailto:）、路径前缀等。

6. [attr$=value] —— 后缀匹配

匹配属性值以指定字符串结尾的元素。

<a href="document.pdf">PDF 文件</a>
<a href="image.jpg">图片</a>

/* PDF 文件样式 */
a[href$=".pdf"] {
  color: red;
}

/* 图片链接样式 */
a[href$=".jpg"],
a[href$=".png"],
a[href$=".gif"] {
  border: 2px solid #ccc;
}

✅ 实用场景：为不同文件类型链接添加不同图标或颜色。

7. [attr*=value] —— 子串包含匹配

只要属性值中包含指定子字符串即匹配。

<a href="https://mail.google.com">Gmail</a>
<a href="https://drive.google.com">Google Drive</a>

/* 所有 Google 相关链接 */
a[href*="google"] {
  font-weight: bold;
}

⚠️ 注意：匹配是“模糊”的，可能误匹配（如 href*="ail" 会匹配 mail 和 detail）。

三、大小写不敏感匹配（Case-insensitive）

在选择器末尾添加 i 标志，可忽略大小写：

/* 匹配 href 中包含 .PDF、.Pdf、.pdf 等 */
a[href$=".pdf" i] {
  color: purple;
}

🌐 浏览器支持：Chrome 49+、Firefox 47+、Safari 9+、Edge 79+。
📌 建议在需要处理用户输入或不确定大小写的场景使用。

四、组合使用与优先级

属性选择器可以与其他选择器组合使用：

/* 类 + 属性 */
.btn[data-size="large"] { ... }

/* 伪类 + 属性 */
input[type="text"]:focus { ... }

/* 多属性同时匹配 */
input[type="checkbox"][disabled] { ... }

⚖️ 优先级：每个属性选择器的优先级为 0,1,0（与类选择器相同）。

五、最佳实践建议

1. 避免过度使用：属性选择器性能略低于类选择器，大量使用可能影响渲染。
2. 语义清晰优先：能用类名就用类名，属性选择器更适合补充或处理无类名内容。
3. 注意可维护性：HTML 属性变更会导致样式失效，需谨慎绑定到结构属性上。
4. 结合 JS 动态属性：非常适合配合 data-* 属性做状态控制（如 data-loading="true"）。