CSS组合选择器通过连接多个选择器精确匹配元素，包括后代、子、相邻兄弟、通用兄弟及属性类组合，实现样式精准控制与作用域限定。
在 CSS 中，组合选择器通过将多个选择器连接在一起，实现对元素更精确的匹配。只有当一个元素同时满足所有选择器的条件时，样式才会被应用。合理使用组合选择器可以避免污染全局样式，提升代码可维护性。
后代选择器：匹配嵌套关系
使用空格连接两个选择器，表示选中某个元素内部的所有指定后代元素。
例如：- .container p 会选中所有 class 为 container 的元素内部的 p 元素，无论嵌套多深。
适用于需要限定作用范围的场景，比如只对某区域内的段落设置样式。
子选择器：仅匹配直接子元素
使用 > 符号连接，只选中父元素的直接子元素。
立即学习“前端免费学习笔记（深入）”；
例如：- ul > li 只选中 ul 的直接 li 子项，不包括嵌套在其他元素中的 li。
比后代选择器更精确，避免深层嵌套带来的意外样式继承。
相邻兄弟选择器：紧接在后的同级元素
使用 + 连接，选中紧跟在另一元素后的同级元素。
例如：
- h1 + p 匹配紧跟在 h1 后面的第一个 p 元素。
常用于标题后的第一段设置首行缩进或边距。
通用兄弟选择器：同一父级下的后续所有兄弟
使用 ~ 连接，选中前面元素之后的所有同级元素。
例如：- h2 ~ p 会选中所有在 h2 之后的同级 p 元素，不论中间是否有其他元素。
适合文章内容中标题后所有段落统一格式的场景。
属性组合与类组合：多重条件匹配
多个选择器连写无空格，表示元素必须同时满足所有条件。
例如：- p.highlighted.urgent 匹配同时拥有 highlighted 和 urgent 类的 p 元素。
- input[type="text"].large 匹配 type 为 text 且 class 为 large 的 input。
这种写法非常适合组件化开发中对特定状态的元素进行精确控制。
基本上就这些。掌握这些组合方式，就能在不依赖 JavaScript 的情况下，用 CSS 精准锁定目标元素。关键是理解每种组合符的匹配逻辑，避免过度嵌套导致性能下降。
