层次选择器

1. 后代选择器（Descendant）

• 语法：A B
• 作用：选择 A 元素的所有 B 后代

article p {  /* 选择 article 内的所有段落 */
  line-height: 1.6;
}
<article>
	<p>
		<p></p> 所有的p元素都会被选择
	</p>
</articel>

2. 子元素选择器（Child）

• 语法：A > B
• 作用：仅选择直接子元素

article > p {  /* 仅选择 nav 的直接子 ul */
  padding-left: 0;
}
<article>
	<p>这里的p元素会被选择，因为是直接子元素
		<p></p> 这里的p元素不会被选择
	</p>
</articel>
 

3. 相邻兄弟选择器（Adjacent Sibling）

• 语法：A + B
• 作用：选择紧接在 A 后的第一个兄弟 B

h2 + p {  /* h2 后的第一个段落 */
  margin-top: 5px;
}

4. 通用兄弟选择器（General Sibling）

• 语法：A ~ B
• 作用：选择 A 之后的所有兄弟 B

input:checked ~ .content {  /* 选中复选框后的所有内容 */
  display: block;
}

---