1. CSS选择器概览
1.1 何为CSS选择器
在前端开发中，CSS选择器是用于定位文档中元素并对其应用样式的表达式。通过选择器，你可以精准地指定需要修改的标签、类、ID及属性，从而实现灵活的样式控制与可维护的代码结构。理解选择器的定位机制，是实现高效样式编写的基础。
作为前端开发的必备技能，选择器的作用不仅仅限于“选中元素”，还包含对元素关系和状态的描述，进而驱动复杂的UI表现。掌握不同类型选择器的用法，能让你写出更简洁、可复用的样式规则。
1.2 选择器的分类
CSS选择器主要分为几大类：基本选择器（标签选择器、类选择器、ID选择器、通用选择器）、组合选择器（后代、子、邻接兄弟、通用兄弟）、属性选择器、以及 伪类与伪元素。理解这四大类的组合方式，是精确定位和分层样式的关键。
在实际开发中，设计模式往往依赖于多种选择器的混合使用。例如，结合类选择器和属性选择器，可以实现具备自定义属性的组件样式，并在不同状态下保持一致性。组合的力量来自可组合性。
1.3 优先级与具体性
CSS的优先级规则决定了当多个选择器匹配同一个元素时，哪一个样式会最终生效。具体性（Specificity）越高，优先级越大，通常由标签、类、ID等权重组成。理解以下要点有助于避免不可预期的样式覆盖：
ID选择器>类选择器>元素选择器，而行内样式通常具有最高优先级。为了避免混乱，推荐使用明确的结构并尽量减少嵌套的强制覆盖。
/* 优先级示例 */
#header .nav a { color: red; } /* ID(100) + 类(10) + 元素(1)，总体较高 */
nav a { color: blue; } /* 类 + 元素，总体较低 */
header { color: green; } /* 元素选择器，总体最低 */
2. 常用选择器全方位解析
2.1 标签选择器与通用选择器
标签选择器直接使用元素名称来匹配，例如 p、h1、button 等，适用于全局或大范围的样式应用。通用选择器 * 可以匹配文档中的所有元素，通常用于重置或建立全局基础样式。通过结合标签和其他选择器，可以实现精准覆盖，同时避免过度依赖强覆盖规则。
在实际工作中， 标签选择器常用于对特定类型的控件进行风格统一，而通用选择器用于浏览器默认样式的清理或全局盒模型设定。先全局再局部覆盖，是常见的工作流。
/* 标签选择器示例 */
p { line-height: 1.6; }/* 通用选择器示例，用于盒模型重置 */
* { box-sizing: border-box; }
2.2 类选择器与ID选择器
类选择器以点号开头，匹配具有相同类名的多个元素，适用于组件化与复用性较高的样式管理。ID选择器以井号开头，匹配文档中唯一的一个元素，通常用于特定定位与覆盖性更强的样式。合理使用类选择器实现组件化，避免滥用ID选择器，以提升可维护性与可扩展性。
在实际场景中，常结合伪类来增强交互效果，例如在鼠标悬停时改变颜色，或在选中状态时调整边框。组合使用能实现灵活而统一的UI风格。
/* 类选择器示例 */
.card { padding: 1rem; border-radius: 8px; }/* ID选择器示例 */
#main-cta { background: #007bff; color: #fff; text-align: center; }
2.3 属性选择器
属性选择器用于根据元素的属性及其值进行筛选，覆盖了存在型选择（如 [disabled]）和值匹配型选择（如 [type="email"]、[data-role~="admin"]）。属性选择器的灵活性来自对属性和值的多维筛选，可以在不改变HTML结构的前提下实现主题切换、表单状态等功能。
常见用法包括根据输入类型、可见性、数据属性等条件应用样式，从而实现无JS依赖的状态呈现。保持语义化的同时提升样式控制粒度。
/* 按属性匹配的示例 */
input[type="email"] { border-color: #4caf50; }/* 根据数据属性控制样式 */
[data-theme="dark"] body { background: #121212; color: #e0e0e0; }
2.4 伪类与伪元素
伪类用于描述元素的动态状态，如 :hover、:focus、:nth-child(n) 等，伪元素则用于选取元素的子部分，如 ::before、::after、::marker 等。伪类与伪元素是实现交互与细节样式的强大工具，能够在不修改结构的前提下增强体验。
通过伪类，你可以实现鼠标悬停高亮、焦点提示、选中项的顺序定位等；通过伪元素，可以插入装饰性内容或自定义布局分隔线。正确使用伪类/伪元素，避免影响无障碍与可维护性。
/* 伪类示例 */
a:hover { color: #ff4081; }
input:focus { outline: 2px solid #3f51b5; }/* 伪元素示例 */
.list-item::before { content: "• "; color: #9e9e9e; }
3. 实战应用场景
3.1 表单控件样式统一
在表单控件的样式设计中，选择器的组合用于实现一致的外观与交互反馈。通过 [type]、[disabled]、:focus 等选择器的组合，可以实现跨浏览器的统一风格，同时保持对不同控件的独立控制。官方建议在样式表中建立基础控件样式，再通过状态选择器进行细粒度覆盖。
例如，对文本输入框、下拉选择和按钮进行统一边框、圆角、焦点效果的设置，能显著提升用户体验。先建立通用控件样式，再对特定控件做微调。
/* 基础控件样式 */
input, select, textarea { padding: 0.5rem 0.75rem; border: 1px solid #ccc; border-radius: 6px; }/* 获取焦点时的视觉反馈 */
input:focus, select:focus, textarea:focus { border-color: #3f51b5; box-shadow: 0 0 0 3px rgba(63,81,181,0.15); }/* 针对禁用状态的样式 */
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }
3.2 序列化列表的样式
有序/无序列表的美化常用到伪元素和伪类的结合。nth-child、nth-of-type等伪类可以实现复杂的序号或分组效果，而 ::marker/::before/::after 则帮助你定制标记和分隔线。通过这些选择器实现视觉一致性，提升可读性。
在多项列表示例中，结合 li 的序号与自定义符号，可实现美观的列表样式。注重语义和可访问性，避免仅为美观而影响结构。
/* 使用 nth-child 实现交错背景 */
ul li:nth-child(odd) { background: #f9f9f9; }
ul li:nth-child(even) { background: #fff; }/* 自定义列表标记 */
ul { list-style: none; padding-left: 0; }
ul li::before { content: "— "; color: #888; margin-right: .5em; }
3.3 主题切换与可访问性
为实现主题切换，可以使用属性选择器结合 data-theme 属性来控制整体风格。[data-theme="dark"] 的组合用于深色模式切换，而在可访问性方面，确保对比度、聚焦样式和键盘导航顺序清晰可用。属性选择器在无JS降级方案中尤为有用。
例如，切换主题时仅通过修改根元素上的数据属性即可完成大规模样式切换，保持结构不变、逻辑清晰。提升用户体验同时保持可维护性。
/***** 主题切换示例 *****/
:root { --bg: #ffffff; --fg: #111; }
[data-theme="dark"] { --bg: #121212; --fg: #e0e0e0; }body { background: var(--bg); color: var(--fg); }/* 关注焦点可见性 */
:focus-visible { outline: 3px solid #2962ff; outline-offset: 2px; }
