CSS选择器组合应用_子元素后代相邻兄弟选择实践
子元素选择器（>）仅选直接子元素，后代选择器（空格）选所有层级后代，相邻兄弟选择器（+）选紧接的同级元素，通用兄弟选择器（~）选之后所有同级匹配元素，组合使用可精准控制样式无需额外类名。
在CSS中，选择器的灵活组合能帮助我们精准控制页面元素的样式。掌握子元素、后代、相邻和兄弟选择器的用法，是实现复杂布局和样式复用的关键。下面通过实际场景讲解这些选择器的组合应用。
子元素与后代选择器的区别
子元素选择器（>）只选直接子元素，而后代选择器（空格）会选所有层级的后代。
例如：- div > p：只选div的直接子级p元素
- div p：选div内所有层级的p元素，包括嵌套多层的
在表单布局中，若只想给顶层说明文字加样式，用>可避免影响内部组件中的p标签。
相邻兄弟选择器的实用场景
相邻兄弟选择器（+）匹配紧接在某元素后的同级元素。
常见用途：- 为标题后的第一个段落增加上边距：
h2 + p { margin-top: 1em; } - 隐藏折叠内容后的块：
.toggle:checked + .content { display: block; }
这种选择器适合处理语义连续的内容区块，避免给每个元素加类名。
通用兄弟选择器扩展匹配范围
使用~可选择同级中之后的所有匹配元素，不限于紧邻。
举例：- 表单中高亮已填写项之后的所有输入框：
input.filled ~ input { opacity: 0.8; } - 文章内让引用块之后的图片变小：
blockquote ~ img.figure { width: 80%; }
相比+，~更适用于跨多个兄弟元素的样式传递。
组合使用提升选择精度
将多种选择器结合，可在不修改HTML结构的前提下精确命中目标。
示例：-
nav > ul > li:hover > a：仅导航第一级菜单项悬停时的链接 -
.card > .header + .content：卡片中紧跟header的content区域 -
fieldset:first-child >：首字段集中legend后所有段落
legend + div ~ p
legend + div ~ p这类组合常用于组件化开发，减少额外类名依赖，提高样式的可维护性。
基本上就这些。理解每种选择器的行为边界，再根据DOM结构合理搭配，就能写出简洁高效的CSS规则。关键是多实践，在真实结构中验证选择器效果。
