CSS 属性选择器

学习 [attr]/[attr=val]/[attr^=]/[attr$=]/[attr*=] · 难度：进阶 · +15XP

CSS 属性选择器完全指南

属性选择器允许你根据元素的属性或属性值来选择元素，无需添加额外的 class 或 id。它提供了非常灵活和精准的选择能力。

七种属性选择器

选择器	说明	示例
[attr]	拥有该属性	[disabled] 选中所有禁用元素
[attr=val]	属性值完全等于 val	[type="text"]
[attr~=val]	属性值包含完整单词 val	[class~="btn"]
[attr|=val]	属性值为 val 或以 val- 开头	[lang|="en"] 匹配 en, en-US
[attr^=val]	属性值以 val 开头	[href^="https"]
[attr$=val]	属性值以 val 结尾	[src$=".jpg"]
[attr*=val]	属性值包含 val 子串	[title*="CSS"]

基础用法示例

/* 选中所有必填输入框 */
[required] {
  border-left: 3px solid red;
}
/* 精确匹配 */
input[type="email"] {
  background: #f9f9f9;
}
/* 以某值开头 — 外部链接 */
a[href^="http"]::after {
  content: " ↗";
  font-size: 0.8em;
}
/* 以某值结尾 — 文件类型图标 */
a[href$=".pdf"]::before {
  content: "???? ";
}
a[href$=".mp3"]::before {
  content: "???? ";
}
/* 包含某值 */
img[src*="thumbnail"] {
  border: 1px solid #ddd;
}

组合使用

/* 同时匹配多个属性 */
input[type="text"][required] {
  border-color: #ff9800;
}
/* 否定 — 不含某属性 */
a:not([href]) {
  color: #999;
  cursor: not-allowed;
}

区分大小写

默认情况下属性选择器区分大小写（HTML 属性通常不区分）。使用 i 标志强制不区分大小写：

/* 匹配 "PDF", "pdf", "Pdf" 等 */
a[href$=".pdf" i] {
  color: red;
}

实用场景

1. 表单样式：根据 type 属性为不同类型输入框设置不同样式
2. 链接区分：根据 href 区分内部/外部链接、不同协议
3. 状态指示：为 [disabled]、[readonly] 等状态设置样式
4. 图片类型：根据 src 扩展名设置不同边框或图标
5. 数据属性：配合 data-* 自定义属性使用

data- 属性结合

/* HTML: <span data-status="online"> */
[data-status="online"]::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  background: #4CAF50;
  border-radius: 50%;
  margin-right: 6px;
}
[data-status="offline"]::before {
  background: #ccc;
}

表单综合示例

form input[type="text"],
form input[type="email"],
form input[type="password"] {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
}
form input[type="submit"] {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
}
form input:not([type="submit"]) {
  margin-bottom: 16px;
}

属性选择器是现代 CSS 中不可或缺的工具，尤其适合处理动态内容和组件化开发，减少对 class 命名的依赖。