本篇文章围绕 CSS 选择器类型大全，系统梳理从标签选择器、类选择器、ID 选择器到属性选择器、伪类、伪元素，以及各种组合器的完整分类，并结合实战应用场景，帮助前端工程师提升选择器的掌控力与性能。
1. 标签选择器
定义与基本语法
标签选择器（Element Selector）基于元素的标签名进行匹配，是最直观的选择方式。语法简单，无需额外的类名或ID即可选中同类型的标签。
它的应用场景通常用于对整类元素的统一风格设定，确保页面的结构性样式统一。
/* 选择所有段落并设置基础字体与颜色 */\np { font-family: "Helvetica Neue", Arial, sans-serif; color: #333; }优点与局限
优点：简单直观、易于理解，低特异性，便于全局控制。
局限：对具体组件的定位能力有限，容易影响到页面中不相关的元素，维护性在大型项目中下降。
2. 类选择器
用法与多类组合
类选择器以点号开头，具备极高的灵活性。可通过组合实现丰富的样式分组，不需要依赖ID。
通过命名规范与结构化的类名，可以提升组件化和可维护性。
/* 单个类 */\n.btn { padding: 8px 12px; border-radius: 4px; }\n/* 多类组合 */\n.btn.primary { background: #007bff; color: #fff; }优先级与实践要点
类选择器的特异性介于标签和ID之间，通常用于组件级样式的覆盖控制。遵循命名空间与层级结构，可以降低冲突。
在大型项目中，推荐使用 BEM、SMACSS 等命名规范来组织类名。
3. ID选择器
标识符的唯一性
ID选择器以 # 开头，具有较高的特异性，理论上在文档中应只出现一次。确保全局唯一性是使用ID选择器的前提。
它通常用于对单一组件的精确定位或覆盖性强的样式。
#header { background: #f8f9fa; padding: 16px; }注意事项
过度依赖 ID 可能降低样式的可复用性与可维护性，建议限定在独立组件内部的唯一样式。谨慎使用全局 ID。
4. 属性选择器
基本用法
属性选择器用于根据元素属性及其值进行匹配，适合对具备某些属性的元素进行分组样式。无需额外的类或ID，降低 DOM 修改成本。
示例包括链接的目标属性与表单控件的类型。
/* 匹配有 target 属性的链接 */\na[target] { text-decoration: none; }\n/* 匹配 type 为 text 的输入框 */\ninput[type="text"] { border: 1px solid #ccc; }高级匹配
属性选择符还支持多种匹配方式，如前缀、后缀、子串等：^、$、*=。灵活覆盖多类场景。
示例：a[href^="https"]、img[src*="avatar"]、li[data-role|="admin"]。
a[href^="https"] { color: #0a6; }\nimg[src*="avatar"] { border-radius: 50%; }5. 伪类选择器
定位状态与结构
伪类用于基于元素的状态、位置或关系进行选择，是实现交互和动态样式的关键工具。广泛用于增强用户体验。
常见的伪类包括 :hover、:focus、:active、:visited、:checked 等。
a:hover { color: red; }\ninput:focus { outline: 2px solid #5b9bd5; }结构性伪类
结构性伪类如 :nth-child(n)、:nth-last-child(n)、:first-child、:last-child、:nth-of-type(n) 等，帮助在复杂结构中进行定位。极大地提升选择的粒度。
ul li:nth-child(3) { color: blue; }\nul li:first-child { font-weight: bold; }6. 伪元素选择器
视觉效果注入
伪元素用于在实际元素内部或外部注入装饰性内容，而无需修改 DOM。本质上是在渲染阶段生成的附加内容。减少 DOM 操作。
常见的伪元素包括 ::before、::after、::first-letter、::first-line。
.btn::before { content: ">>"; margin-right: 6px; }\na::after { content: " (Link)"; color: #888; }兼容性与写法差异
现代 CSS 规范推荐使用双冒号 ::before、::after，而旧写法使用单冒号的 :before、:after 也在部分浏览器中得到支持。
/* 双冒号写法 */\n.btn::before { content: "▶"; }\n/* 单冒号写法（兼容性） */\n.btn:before { content: "▶"; }7. 组合器
后代、子、相邻、同胞组合
组合器用于在文档树结构中进行精确定位，帮助实现高精度的样式绑定。理解结构关系是高效选择的关键。
常见组合器包括空格（后代）、>（子元素）、+（相邻兄弟）以及 ~（同胞兄弟）。
div > p { margin: 0; }\ndiv p { color: #333; }\nul > li + li { border-top: 1px solid #eee; }8. 分组与进阶应用
分组选择器与命名规范
分组选择器允许把多条选择器放在同一个规则块中，用逗号分隔，显著提升代码复用性。避免重复定义。
通过分组，可以在同一规则下应用统一的字体、颜色等属性。
h1, h2, h3 { margin: 0; padding: 0; font-family: system-ui, -apple-system; }9. 特性对比与实战要点
特异性机制
特异性决定哪条样式最终生效。ID > 类/属性/伪类 > 标签 的权重规则，是解决样式冲突的核心。
在大型项目中，合理组织选择器、使用命名空间与层级结构，可以降低冲突风险。
#submit.btn.primary { color: white; }\n.btn { color: #000; }伪类与伪元素的混合使用
将伪类与伪元素结合使用，可以实现丰富的 UI 效果，而无需额外的 DOM。
通过组合，例如：a.button:hover::after，可以在悬停时添加渐变的箭头或提示文本。
a.button:hover::after { content: " →"; }兼容性与迁移
不同浏览器对 :has()、:where() 等选择器的支持程度不同。在实际上线前，请查看浏览器兼容性表以决定是否使用。
/* 现代化写法示例，注意兼容性 */\n:where(.card, .panel) > :first-child { margin-top: 0; }