关系选择器
后代/子代/相邻兄弟/通用兄弟四种组合器
关系选择器
**关系选择器（组合器）**根据元素之间的关系选择目标——不止父子，还有兄弟。
学完本章你将： 掌握后代/子代/相邻兄弟/通用兄弟四种组合器。
四种组合器
css
/* 1. 后代选择器（空格）——所有后代 */
div p { color: red; } /* div 内所有 p */
/* 2. 子代选择器（>）——直接子元素 */
div > p { color: blue; } /* div 的直接子 p */
/* 3. 相邻兄弟（+）——紧跟在后面的第一个 */
h2 + p { color: green; } /* h2 后面紧挨着的那个 p */
/* 4. 通用兄弟（~）——后面所有兄弟 */
h2 ~ p { color: orange; } /* h2 后面所有同级 p */对比演示
html
<div>
<p>直接子元素——子代选择器选中</p>
<section>
<p>孙子元素——只有后代选择器选中</p>
</section>
</div>
<h2>标题</h2>
<p>相邻兄弟——+ 选中</p>
<p>通用兄弟——~ 选中</p>
<p>通用兄弟——~ 也选中</p>实用场景
css
/* 导航中的链接 */
nav a { ... }
/* 文章中的直接段落 */
article > p { ... }
/* 标题后面的第一段（导语） */
h2 + p { font-size: 1.2em; }