组合选择器通过多种选择器结合精准定位元素，提升样式控制效率。1. 后代选择器用空格连接，如 .container p 选中任意层级的后代p元素；2. 子选择器使用 > 符号，仅选直接子元素，如 ul > li；3. 相邻兄弟选择器用 +，匹配紧随其后的同级元素，如 h2 + p；4. 可与伪类和属性选择器结合，实现动态样式，如 input[type="text"]:focus 或 a[href^="https"]:after；5. 实战中应避免过度嵌套，推荐语义化命名与简洁组合，如 .menu > .item:hover，兼顾优先级与可维护性。
在实际开发中，网页结构往往非常复杂，单纯使用标签、类或ID选择器难以精准定位目标元素。这时就需要用到组合选择器，通过多个选择器的组合来精确控制样式。掌握CSS复合选择器语法，能大幅提升代码效率和可维护性。
后代选择器：层层嵌套中的精准定位
后代选择器通过空格连接两个或多个选择器，选中某元素内部的所有指定后代元素，无论嵌套多深。
例如：-
.container p会选中所有 class 为 container 的元素内部的任何层级的 p 标签 -
nav ul li a匹配导航中链接，避免影响页面其他链接
这种写法常用于模块化布局，比如只对某个区域内的标题调整样式，而不影响全局。
子选择器与相邻兄弟选择器：控制层级与顺序
如果只想选中直接子元素，使用 > 符号定义子选择器，比后代更严格。
立即学习“前端免费学习笔记（深入）”；
-
ul > li只选 ul 的直接子项 li，不包括嵌套在内部的子 ul 中的 li
而 + 是相邻兄弟选择器，匹配紧接在某元素后的同级元素。
-
h2 + p表示每个紧跟在 h2 后面的第一个 p 元素，适合设置标题后段落的间距
伪类与属性选择器结合：动态状态与数据驱动样式
组合选择器的强大之处还体现在与伪类、属性选择器的联合使用上。
-
input[type="text"]:focus可以只为文本输入框在获得焦点时添加边框效果 -
li.active + li给激活项后面的列表项加边线，实现导航视觉引导 -
a[href^="https"]:after可为外链添加图标，提升用户体验
这类组合让CSS具备一定“逻辑判断”能力，减少额外类名的添加。
实战技巧：提高优先级与避免过度嵌套
合理使用组合可以避免滥用 !important 或内联样式。
- 越具体的选择器优先级越高，但不要写过长路径如
body div section nav ul li a:hover，难维护且性能差 - 推荐语义化命名搭配简单组合，如
.menu > .item:hover - 调试时可用浏览器开发者工具查看最终匹配规则，确认是否命中预期元素
基本上就这些。组合选择器是CSS中最实用的功能之一，关键在于平衡精确性与简洁性。用得好，能让样式表更清晰、更高效。
