属性选择器是 CSS 中非常强大且实用的一类选择器。它允许我们根据 HTML 元素的属性（attribute）或属性值来选中元素，而不需要额外添加 class 或 id。
在实际开发中，属性选择器特别适合：
- 表单样式统一（input[type=”text”]）
- 外部链接识别（a[href^=”https”]）
- 文件类型区分（a[href$=”.pdf”]）
- 数据属性样式（[data-theme=”dark”]）
- ARIA 无障碍增强
浏览器支持：所有现代浏览器（包括移动端）已完全支持，2026 年可放心大规模使用。
1. 基本语法规则
属性选择器统一使用方括号 [] 包裹。
[属性名] { ... } /* 只要有这个属性就选中 */
[属性名="值"] { ... } /* 属性值完全等于 */
[属性名~="值"] { ... } /* 值是空格分隔的单词之一 */
[属性名|="值"] { ... } /* 值以 值- 开头（常用于语言代码） */
[属性名^="值"] { ... } /* 值以 值 开头 */
[属性名$="值"] { ... } /* 值以 值 结尾 */
[属性名*="值"] { ... } /* 值包含 值（任意位置） */
[属性名="值" i] { ... } /* i 标志：忽略大小写（推荐） */
[属性名="值" s] { ... } /* s 标志：严格区分大小写（默认在 HTML 中） */
注意：
- 属性选择器优先级为 10（与类选择器、伪类相同）
- 可以与元素选择器、类、ID 等组合使用
- HTML 属性匹配默认不区分大小写（但推荐显式加
i）
2. 7 种属性选择器详解 + 示例
1. 存在属性选择器 [attr]
选中只要带有该属性的元素（值是什么无所谓）。
/* 所有带有 alt 属性的图片加上边框 */
img[alt] {
border: 3px solid gold;
padding: 4px;
}
/* 所有有 data- 开头属性的元素 */
[data-*] { /* 注意：通配符不支持，需具体写或结合其他选择器 */ }
2. 精确匹配 [attr="value"]
属性值完全相等。
/* 所有 type 为 text 的输入框 */
input[type="text"] {
border: 2px solid #3498db;
padding: 8px;
}
/* 按钮类型 */
button[type="submit"] {
background: #2ecc71;
color: white;
}
3. 单词匹配 [attr~="value"]
属性值是空格分隔的多个单词，其中包含指定值（类似 class 的工作原理）。
/* 选中 class 中包含 "warning" 的元素（虽然 class 通常用 .warning，但演示用） */
[class~="warning"] {
background: #fff3cd;
border-left: 5px solid #ffc107;
}
4. 前缀匹配（语言）[attr|="value"]
属性值以 value- 开头（常用于 lang=”zh-CN” 等语言代码）。
/* 所有中文元素 */
[lang|="zh"] {
font-family: "Microsoft YaHei", sans-serif;
}
5. 开头匹配 [attr^="value"]（最常用之一）
属性值以 value 开头。
/* 所有外部链接（https 或 http 开头） */
a[href^="https://"],
a[href^="http://"] {
color: #e74c3c;
text-decoration: underline;
padding-right: 20px;
background: url(external-icon.svg) no-repeat right center;
}
/* 以 mailto: 开头的邮件链接 */
a[href^="mailto:"] {
color: #3498db;
}
6. 结尾匹配 [attr$="value"]
属性值以 value 结尾。
/* PDF 文件链接特殊样式 */
a[href$=".pdf"] {
color: #e67e22;
font-weight: bold;
}
/* 图片文件 */
img[src$=".jpg"],
img[src$=".png"] {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
7. 包含匹配 [attr*="value"]（最灵活）
属性值任意位置包含指定字符串。
/* 链接中包含 "baidu" 的都高亮 */
a[href*="baidu"] {
color: #ff0000;
}
/* 所有包含 data- 开头的自定义属性元素 */
div[data-*] { /* 实际写法需具体或结合 :has 等 */ }
/* 表单中 placeholder 包含 "搜索" 的输入框 */
input[placeholder*="搜索"] {
background: #f0f8ff;
}
3. 忽略大小写（i 标志）—— 强烈推荐
/* 忽略大小写匹配 */
a[href*="PDF" i] {
color: red;
}
/* 严格区分大小写（s 标志） */
a[href*="PDF" s] {
color: blue; /* 只匹配大写 PDF */
}
4. 组合使用（实战中最强大）
/* 多属性同时满足 */
input[type="text"][required] {
border-color: #e74c3c;
}
/* 与类、伪类组合 */
a.external[href^="https"]::after {
content: "↗";
margin-left: 4px;
}
/* 与 :has() 结合（现代 CSS 神器） */
div:has(a[href$=".pdf"]) {
background: #fff0e6; /* 只要里面有 PDF 链接，整个容器高亮 */
}
5. 性能与最佳实践（2026 建议）
- 优点：语义清晰、无需额外 class，适合动态生成的内容。
- 缺点：比类选择器稍慢（浏览器需检查属性），但现代浏览器优化极好，日常使用无压力。
- 推荐用法：
- 表单控件统一样式 → 用
[type=...] - 文件/链接类型区分 → 用
^=$=*= - 主题切换、暗黑模式 → 用
[data-theme="dark"] - 避免过度使用通配
[attr]或*=（可能选中过多元素）
与现代选择器结合：
:is()/:where()可简化复杂属性选择器:has()实现“父选择器”效果（基于子元素属性）
6. 课后练习（立即动手）
- 给所有外部链接加上图标和颜色（使用
^=） - 为不同文件后缀的下载链接设置不同颜色（
.pdf、.docx、.zip） - 所有带有
required属性的表单控件加上红色边框 - 用
[lang|="zh"]为中文内容设置字体 - 挑战：用属性选择器 +
:has()实现“只要卡片内有图片就加阴影”
把练习写到一个 HTML 文件中测试效果，遇到问题随时问我。
本系列进度：
- (1) 核心语法 + 常见分类
- (2) 优先级与层叠规则（已可补充）
- (3) 伪类与伪元素
- (4) 属性选择器（本课）
下一课预告：《CSS 选择器 (5)：伪类选择器全面进阶（:nth-、:is、:where、:has 等现代神器）》
需要我立刻提供：
- 完整可运行的 HTML + CSS 实战 Demo（表单、链接、卡片示例）
- 属性选择器 优先级计算练习题
- 与
:has()结合的高级实战案例 - 本节所有选择器的速查表（Markdown 可复制）
随时说一声，我马上补充！继续你的 CSS 选择器系统学习，掌握属性选择器后，你已经能写出非常精准、语义化的样式了！✨
