CSS 属性 选择器

以下是关于 CSS 属性选择器（Attribute Selectors） 的中文详解，内容包括定义、常用语法、示例及应用场景、浏览器支持与最佳实践。

---

一、什么是属性选择器？

属性选择器用于根据元素的 属性 及其 属性值 来选中元素，不需要为元素额外添加 class 或 id，就能精准地针对具有某个属性或某类属性值的元素应用样式。

---

二、常用语法与示例

语法	含义	示例
[attr]	选中所有拥有 attr 属性的元素	input[disabled] { opacity: 0.5; }
[attr="value"]	选中属性 attr 值完全等于 "value" 的元素	a[target="_blank"] { color: red; }
[attr~="word"]	选中属性 attr 值中包含空格分隔词"word" 的元素	[class~="btn"] 可匹配 class="btn primary"
`[attr	=”prefix”]`	选中属性 attr 值以 "prefix-" 或等于 "prefix" 开头
[attr^="start"]	选中属性 attr 值以 "start" 开头的元素	a[href^="https"] { text-decoration: underline; }
[attr$="end"]	选中属性 attr 值以 "end" 结尾的元素	img[src$=".png"] { border: 1px solid #ccc; }
[attr*="contain"]	选中属性 attr 值包含 "contain" 子串的元素	a[href*="example"] { color: green; }
[attr^="A" i]（大小写）	大小写不敏感，开头匹配	[type^="TeXt" i] 同时匹配 type="text" 和 type="TEXT"
[attr*="sub" s]（大小写）	大小写敏感，包含子串	默认情况即为敏感匹配

注：带空格的语法如 [attr^="A" i] 是 CSS4 新增的“匹配修饰符”，用于控制大小写敏感度，现代浏览器支持良好。

---

三、示例详解

<!-- HTML -->
<a href="https://example.com" target="_blank">外部链接</a>
<a href="/about">关于我们</a>
<button disabled>不可点击</button>
<button>可点击</button>
<img src="logo.png" alt="Logo">
<img src="banner.jpg" alt="Banner">

/* 1. 选中所有外部链接（以 https 开头） */
a[href^="https"] {
  color: crimson;
}

/* 2. 选中所有 PNG 图片 */
img[src$=".png"] {
  border: 2px solid #888;
}

/* 3. 选中所有带 disabled 属性的按钮 */
button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 4. 选中所有链接地址中含 example 字样的 <a> */
a[href*="example"] {
  text-transform: uppercase;
}

/* 5. 选中 class 属性包含 btn 词汇的元素 */
[class~="btn"] {
  padding: 8px 12px;
  background: #007bff;
  color: #fff;
  border-radius: 4px;
}

---

四、应用场景

1. 表单样式
   • 针对不同类型的输入（input[type="text"]、input[type="checkbox"]、input[type^="date"]）分别设置样式。
2. 响应式图标
   • 通过 [class^="icon-"] 选中所有以 icon- 开头的类，为其统一设置尺寸或颜色。
3. 图片优化
   • 对不同格式（.png、.svg、.webp）的图片分别加特殊样式或懒加载占位。
4. 动态属性
   • 当使用 data- 自定义属性时，例如 [data-state="open"] 控制折叠菜单或弹窗的展示。
5. 内容高亮
   • 如 [aria-current="page"] 选中当前导航项并加粗或换色。

---

五、浏览器支持

属性选择器自 CSS2 即已引入，所有现代浏览器及 IE8+ 都已支持。大小写敏感修饰符（如 i、s）为 CSS4 特性，建议在需要兼容旧版浏览器时慎用。

---

六、最佳实践与注意事项

1. 避免过度复杂
   • 属性选择器匹配性能低于 ID/Class 选择器，复杂的深度嵌套和大量匹配会影响渲染。
2. 指定固定前缀
   • 使用 data- 或统一前缀（如 data-role、data-state），让属性选择更具可读性和可维护性。
3. 配合 BEM/命名规范
   • 对于同一功能模块，可结合 BEM 命名（如 .card--featured[data-state="open"]）实现更精准的样式控制。
4. 注意大小写
   • HTML 属性名和属性值在不同浏览器或 XML 环境下可能区分大小写，推荐统一小写风格。
5. Fallback
   • 对于需兼容 IE8 及更旧环境的项目，避免使用 CSS4 匹配修饰符，仅使用基本属性选择器。

---

掌握 CSS 属性选择器，能够让你更灵活地针对元素特定属性或属性值进行样式控制，无需额外的类名或 JS 逻辑即可实现更多场景的需求。