1. 基础选择器全景：从标签到属性的入门级掌握
1.1 标签选择器与类型定位
在 CSS 中，标签选择器按元素名称筛选目标，语法简单直接，例如 <p> 对应的样式会应用到所有段落元素。这类选择器速度快、覆盖面广，但在大型项目中容易产生样式污染，需要结合其他选择器提高命中率。
了解标签选择器的本质后，可以快速实现对页面结构的样式化。通过结合通用的类名策略，可以在全局范围内保留可维护性，与已有组件结构协同工作。以下示例展示了最基础的用法。
/* 标签选择器示例 */
p { line-height: 1.6; margin: 0 0 1em; color: #333; }
h1, h2, h3 { margin-top: 1em; font-weight: 600; }
1.2 类选择器：以点号开头实现复用与组合
类选择器以点号（.）开头，用于对一组元素赋予相同的样式，是实现样式复用的核心工具。通过组合多个类，可以实现更精准的目标，而不必修改 HTML 结构。
在大型应用中，类选择器是实现组件化样式的关键，它能够在不同组件间共享相同风格，同时避免对全局标签产生影响。
/* 类选择器示例 */
.btn { display:inline-block; padding:0.5em 1em; border-radius:4px; }
.btn.primary { background:#1e88e5; color:#fff; }
1.3 ID 选择器：唯一性与特化性
ID 选择器以井号（#）开头，目标是某个页面中的唯一元素。由于具有高特性权重，错误使用会降低样式的可重用性，但在需要强制覆盖时非常有用。
在实际开发中，尽量避免滥用 ID 选择器以保持 CSS 的可维护性，更推荐配合类选择器和层级选择来实现局部样式。
/* ID 选择器示例 */
#header { height: 60px; background: #222; color: #fff; }
#main-content { padding: 20px; }
1.4 通用选择器与高效性注意
通用选择器用星号（*）表示对所有元素的筛选，虽然简单强大，但在大文档中会带来性能开销，应谨慎使用，避免覆盖过多元素的默认样式。
在需要快速初始化某些全局样式时，通用选择器可以作为起点，但务必结合后续的具体选择器来缩小作用范围。
/* 通用选择器示例 */
* { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
1.5 属性选择器：条件筛选的灵活性
属性选择器通过方括号筛选元素，适用于需要基于属性值进行样式控制的场景。例如 a[target="_blank"] 可以区分外部链接，提升可访问性与交互体验。
组合属性选择（如 [attr^="start"]、[attr$="end"]、[attr*="mid"]）让样式与数据属性紧密耦合，适合在 UI 组件库中实现更灵活的外观控制。
/* 属性选择器示例 */
a[target="_blank"] { color: #1e90ff; }
input[type^="text"] { width: 240px; }
[data-state~="active"] { outline: 2px solid #4caf50; }
2. 组合与层级：后代、子元素与兄弟选择器的实战应用
2.1 后代选择器：空间关系的灵活筛选
后代选择器通过空格表示，能够筛选出某一元素内所有后代中的匹配元素。它的强大在于无需改变结构即可实现广泛覆盖，但要注意选择器的层级深度对性能的影响。
在复杂布局中，通过后代选择器实现全局样式的对齐与一致性，如导航中的链接颜色统一、列表项样式在任意嵌套层级下保持一致。
/* 后代选择器示例 */
nav ul li a { color: #333; text-decoration: none; }
article .content p { line-height: 1.8; }
2.2 子元素选择器：父子直接关系
子元素选择器使用大于号（>）表示直接子节点，它有助于严格限定样式作用范围，避免对同级及下级元素的意外覆盖。
在组件化的 UI 结构中，使用子元素选择器可以确保父组件对直接子项的风格控制保持清晰与可预测。
/* 子元素选择器示例 */
ul > li { list-style: none; padding: 0; }
.card > .card-header { font-weight: 600; }
2.3 相邻兄弟选择器：紧挨着的关系
相邻兄弟选择器利用“+”实现紧邻同级的筛选，例如 h2 + p 选中紧随标题后的段落，适合快速对接结构化标记的样式。
它的优势在于语义明确、可读性强，同时能避免对后续元素产生意外影响。
/* 相邻兄弟选择器示例 */
h2 + p { margin-top: 0.5em; color: #555; }
.btn + .hint { margin-left: 8px; font-size: 12px; color: #999; }
2.4 一般兄弟选择器：跨越距离的关系
一般兄弟选择器使用波浪号（~）来选择同级中位于目标元素之后的所有匹配元素，适用于在层级中的非直接关系场景。
在状态提示、分区样式或分组视觉效果中，通常会利用这种选择器实现全局风格的一致性。
/* 一般兄弟选择器示例 */
h2 ~ p { margin-top: 1em; }
.section-kbd ~ .legend { display: inline-block; margin-left: 0.5em; }
3. 伪类与伪元素：状态与内容的精细化控制
3.1 伪类选择器：状态、结构与动态效果
伪类选择器以冒号开头，常用来表达 元素的状态、结构位置或相对位置等信息，如 :hover、:focus、:nth-child() 等。
通过合理运用伪类，可以在不增加额外标记的情况下实现丰富的交互与样式反馈，这对于提升性能和用户体验尤为关键。
/* 伪类选择器示例 */
a:hover { color: #e91e63; text-decoration: underline; }
button:focus { outline: 2px solid #2196f3; }
ul li:nth-child(3) { background: #f5f5f5; }
3.2 伪元素选择器：内容与装饰的分离
伪元素使用双冒号表示，主要用于在真实文档内容前后插入装饰性内容，如 ::before、::after。
这是实现“无额外标记、但可视化增强”的强大工具，适合添加图标、引导线、装饰性分割线等效果。
/* 伪元素示例 */
a::after { content: " →"; color: #666; }
.quote::before { content: "“"; font-size: 1.2em; }
4. 实战场景：从基础到实战的选择器组合
4.1 组件样式隔离与可复用性
在组件化开发中，通过组合类选择器、后代选择器与伪类，可以实现高可复用的样式模板，同时降低对全局命名空间的冲突。
示例中，使用统一的 .btn、.btn--primary 等类名组合，确保按钮在不同区域保持一致风格，并通过伪类实现交互反馈。
/* 组件化按钮样式示例 */
.btn { padding: .5em 1em; border: 1px solid #ccc; border-radius: 6px; }
.btn--primary { background: #0d6efd; color: #fff; }
.btn:hover { filter: brightness(0.95); }
4.2 响应式设计中的选择器策略
在响应式布局中，结合媒体查询与选择器权重，可以针对不同屏幕尺寸应用不同的样式规则。
通过对特定容器内的后代和子元素使用限定选择器，确保在窄屏设备上仍然保持可读性和操作性。
/* 响应式示例 */
@media (max-width: 768px) {.nav-item { display: block; padding: 12px; }.grid > .col { width: 100%; }
}
4.3 针对性能的选择器优化
选择器的性能与层级深度、命中范围密切相关。避免过度嵌套和过于泛化的选择，从而降低浏览器的匹配成本。
在实际开发中，可以通过明确的类选择器和短小的层级组合来提升渲染速度，同时保持样式的一致性。
/* 性能友好示例：尽量避免过深的后代选择 */
/* 不推荐 */
.main article div section p { color: #333; }
/* 推荐：更直接的目标 */
.article-content p { color: #333; }
