1. 常用选择器总览
1.1 选择器的定义与分类
在前端开发中，CSS 选择器用于定位页面中的元素并决定哪些样式会被应用。通过不同的选择器类型，可以实现对单个元素、一组元素，甚至复杂结构的精准覆盖。理解选择器的分类对于写出高效、可维护的样式表至关重要。
常见的分类包括基本选择器、组合选择器、伪类与伪元素、以及属性选择器等。基础类型结合组合方式，可以覆盖几乎所有常见的布局和样式需求。下面的实战案例将结合实际场景来展示这些分类在工作中的价值。
/* 通过标签选择器快速为段落统一样式 */
p { font-size: 16px; line-height: 1.5; }/* 通过类选择器精准定位组件 */
.search-input { border: 1px solid #ccc; padding: 8px; }在开始编码前，规划选择器结构有助于避免样式过度嵌套与冲突。一个清晰的选择器层级能提高渲染性能并降低维护成本。
1.2 选择器的权重与优先级
CSS 的优先级机制决定了当多个选择器作用于同一元素时，哪一个样式会生效。权重由标识符的类型与数量共同构成，ID 选择器权重最高，其次是类、伪类、属性选择器等，最终是元素选择器。
通过理解具体性，我们可以避免过度使用 !important，并且做出更具可预测性的样式覆盖。对于同一元素的冲突，通常优先级更高的选择器会覆盖更低的选择器，即使它们的 CSS 声明顺序不同。
/* 具有更高优先级的选择器覆盖同结构较低优先级的选择器 */
#top-bar .menu li.active { color: #fff; } /* 100 + 10 + 1 = 111 的权重组合 */
.menu li { color: #333; } /* 10 + 1 = 11 的权重 */
在实际开发中，建议遵循“就地限定、逐层覆盖”的原则：尽量让样式覆盖在一个可控的范围内展开，避免全局性改动带来的连锁反应。避免滥用高权重选择器，以提升可维护性。
2. 基本选择器
2.1 标签选择器
标签选择器直接使用 HTML 标签名定位元素，例如 div、p、a 等。它的作用范围广，适合为整类元素设定基线样式，但可能导致样式的泛滥。
通过结合其他选择器，可以在不牺牲简单性的前提下实现更细粒度的控制。对全局样式设定要谨慎，避免影响页面结构的可维护性。
/* 为所有段落设置统一字体与行高 */
p { font-family: Arial, sans-serif; line-height: 1.6; }/* 提升链接的可用性：仅在悬停时改变颜色 */
a { color: #1a0dab; text-decoration: none; }
a:hover { text-decoration: underline; color: #d61a2a; }标签选择器的优势在于简单直接，适合作为全局样式的基础，但在复杂应用中需要与其他选择器组合使用，才能实现更精准的行为。
2.2 类选择器与 ID 选择器
类选择器使用点号（.className）来标识一组相似的元素，是实现组件化样式的核心工具。类选择器的可复用性和灵活性非常高，常用于样式主题、按钮、卡片等组件化场景。
ID 选择器使用哈希号（#id）定位单个唯一元素，作用范围严格且权重高。尽量避免在同一个文档中重复使用同一个 ID，以确保可维护性和可预测性。
/* 基础组件的可复用样式 */
.btn { padding: 8px 12px; border-radius: 4px; background: #007bff; color: #fff; }/* 针对某个特定实例的个性化样式 */
#loginButton { background: #28a745; border: none; }通过组合使用类与 ID，我们可以实现既可复用又可定制的样式方案。组件化设计是提高代码可维护性的关键。
2.3 组合选择器与后代选择器的应用
组合选择器通过空格、>、+、~ 等运算符，将多个选择器组合成一个更精确的定位规则。层级关系和父子结构的理解，是提高样式命中率的关键。
后代选择器用于匹配嵌套结构中的目标元素；子元素选择器则限定为直系子元素。正确使用可以显著提升定位效率。
/* 选中 .card 内的直接子元素 .title */
.card > .title { font-weight: bold; }/* 选中 .card 内任意后代的 */
.card span { color: #333; }在设计复杂布局时，优先使用并尽量缩小选择器的作用范围，能够减少浏览器的渲染成本并降低样式冲突。合理的组合与后代选择可以提升可维护性。
3. 组合与后代选择器
3.1 后代选择器与子元素选择
后代选择器通过空格分隔，表示在某一父节点之下的所有匹配元素。它的覆盖范围往往较广，因此需要额外注意。
子元素选择器使用大于号（>）来限定直接子元素，帮助你更严格地控制样式传导。逐步限定选择范围，是提高样式稳定性的有效方法。
/* 后代选择器示例 */
.nav ul li a { color: #666; }/* 直接子元素限定示例 */
.card > p { margin: 0; padding: 8px; }在复杂的组件树中，后代选择器可以实现灵活的风格覆盖，而子元素选择器则确保了结构性约束。两者结合使用，能提升样式的可控性与可读性。
3.2 相邻与通用兄弟选择器
相邻兄弟选择器（A + B）用于定位紧靠在 A 之后的 B 元素，适合实现悬停后邻接元素的联动效果。对相邻结构的了解，有助于实现微交互。
通用兄弟选择器（A ~ B）匹配同级且在 A 之后的所有 B 元素，适合批量调整同级元素的样式。避免无谓的全局覆盖，保持样式的可预测性。
/* 相邻兄弟选择器示例 */
.menu > li + li { margin-left: 16px; }/* 通用兄弟选择器示例 */
.panel h3 ~ p { color: #555; }通过对兄弟关系的掌握，可以实现导航、分组标题与文本之间的微妙关系，从而提升 UI 的可用性和美观度。结构和语义的匹配，是高质量前端开发的基础。
4. 伪类与伪元素
4.1 伪类的用法与场景
伪类用于表示处于某种状态的元素，例如 :hover、:focus、:nth-child(...) 等。伪类是增强交互体验的重要工具，在不增加额外标记的情况下实现丰富的效果。
常见伪类包括 :hover、:active、:focus、:visited 等。合理使用可以提升可用性，同时避免冗余的 JavaScript 逻辑。伪类的状态化设计，是无障碍与响应式的重要组成。
/* 鼠标悬停时改变按钮背景 */
.btn:hover { background: #0056b3; }/* 使用 :focus 提升键盘导航可访问性 */
input:focus { outline: 2px solid #4a90e2; outline-offset: 2px; }在可交互组件中，伪类是实现状态切换的首选方法。避免在 CSS 中滥用伪类，以防样式脏乱与维护成本上升。明确状态与焦点管理，有助于无障碍性。
4.2 伪元素的应用场景
伪元素如 ::before、::after 与 content 属性，常用于在不增加额外标签的情况下插入装饰性内容。伪元素让装饰性与文档结构分离，更利于语义化的保持。
通过伪元素可以实现小图标、分割线、装饰性文本前后缀等效果，提升页面的视觉层次而不污染 HTML。内容与装饰分离是前端最佳实践之一。
/* 使用伪元素添加装饰性分隔线 */
.section-title::after {content: "";display: inline-block;width: 40px;height: 2px;background: #ddd;margin-left: 8px;
}伪元素的使用要注意兼容性与语义性，尽量让装饰性元素对屏幕阅读器友好，避免影响可访问性。兼容性与可访问性需并重。
5. 属性选择器与实践案例
5.1 属性选择器的基本用法
属性选择器通过方括号对元素的属性进行筛选，例如 [type="text"]、[href^="https]、[data-qa="card"] 等。属性选择器在表单控件、数据驱动组件中尤为有用，可以实现语义化的定位与样式分组。
结合布尔属性与部分匹配的语法，可以实现动态样式、主题切换以及状态指示等场景。灵活运用属性选择器提升组件的可复用性。
/* 针对文本输入框的属性选择器 */
input[type="text"] { border: 1px solid #ccc; }/* 根据数据属性提供不同的样式 */
[data-theme="dark"] { background: #1e1e1e; color: #eaeaea; }属性选择器的优势在于不依赖额外的类名即可实现分组和状态化风格。数据驱动的样式策略能提升可维护性。
5.2 实战案例：导航菜单与表格的样式实现
在导航菜单中，结合伪类、相邻选择器与属性选择器，可以实现悬停高亮、当前项标记以及响应式收缩效果。实战场景要求选择器既高效又具可维护性。
在表格中，组合使用类选择器、后代选择器与伪类，能够实现清晰的分组、排序指示与可访问的焦点指示。下面给出一个简化示例，展示常用的结构化选择方式。
/* 导航当前项高亮 */
.nav > li.active > a { color: #fff; background: #007bff; }/* 表格头部与内容区分 */
.table thead th { font-weight: bold; background: #f8f9fa; }
.table tbody tr:nth-child(even) { background: #f2f2f2; }通过上述案例，可以看到合理组合不同类型的选择器，是实现高质量前端 UI 的关键，尤其是在需要响应式和交互状态的场景中。
