组合选择器
把基础选择器用符号组合起来，就能精确圈定目标：
- 后代选择器
ul li：中间是空格，选中 ul 里所有层级的 li，无论嵌套多深。 - 子选择器
ul > li：只选 ul 的直接子元素 li，隔层的不算。 - 相邻兄弟
h2 + p：紧贴在 h2 后面的那一个 p。 - 通用兄弟
h2 ~ p：排在 h2 后面的所有同层级 p。 - 交集
p.special：连写不加空格，既是 p 标签又有 special 类。 - 并集
h1, h2, h3：逗号分隔，同时选中多个，常用于统一默认样式。
新手最常见的错误是后代与子选择器混用：列表嵌套时 ul li 会连子列表一起选中，这时应该用 >。
本节要点空格是后代（所有层级）、
> 是直接子代、+ 是紧邻、~ 是后续所有兄弟；连写是交集，逗号是并集。CSS
<style> nav a { color: teal; } /* 后代：nav 里所有 a */ nav > a { font-weight: bold; } /* 子代：只选直接子级 a */ h2 + p { margin-top: 0; } /* 紧跟 h2 的第一个 p */ h2 ~ p { color: #666; } /* h2 后面所有兄弟 p */ h1, h2 { line-height: 1.3; } /* 并集 */ p.special { font-style: italic; } /* 交集 */ </style> <nav> <a href="#">顶部链接（加粗）</a> <ul><li><a href="#">子级链接</a></li></ul> </nav> <h2>标题</h2> <p>紧跟的段落</p>
📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读