CSS中层次选择器有哪些？

层次选择器是CSS中用来选择文档中特定元素的一种方法，它通过使用不同元素之间的层次关系来选择目标元素。
常见的层次选择器包括：

1. 后代选择器（descendant selector）
2. 子元素选择器（child selector）
3. 相邻兄弟选择器（adjacent sibling selector）
4. 通用兄弟选择器（general sibling selector）

---

1. 后代选择器使用空格表示，可以选择某个元素内部的所有后代元素，例如：

div p {
  /* 选择所有在 div 元素内部的 p 元素 */
}

---

2. 子元素选择器使用大于号表示，只选择作为某元素直接子元素的元素，例如：

div > p {
  /* 选择所有直接作为 div 元素子元素的 p 元素 */
}

---

3. 相邻兄弟选择器使用加号表示，选择紧接在另一个元素后的元素，例如：

h1 + p {
  /* 选择紧接在 h1 元素后面的 p 元素 */
}

---

4. 通用兄弟选择器使用波浪线表示，选择与另一个元素有相同父元素的所有兄弟元素，例如：

h1 ~ p {
  /* 选择与 h1 元素拥有相同父元素的所有 p 元素 */
}

这些层次选择器可以帮助开发者更精确地选择需要样式化的元素，从而实现更加灵活的样式设计。

第四种说明

当使用通用兄弟选择器时，我们可以这样来选择与特定元素有相同父元素的所有兄弟元素。比如，假设我们有以下 HTML 结构：

<div>
  <h1>标题1</h1>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
  <h2>标题2</h2>
  <p>段落4</p>
  <p>段落5</p>
</div>

要选择与 <h2> 元素后面有相同父元素的所有 <p> 元素，我们可以使用通用兄弟选择器。例如：

h2 ~ p {
  /* 选择与 h2 元素拥有相同父元素的所有 p 元素 */
  color: blue;
}

这个例子中，所有与 <h2> 元素后面拥有相同父元素的 <p> 元素都会被设置为蓝色。

---

+ 与 ~ 的区别

• 相邻选择器（+）中的两个元素有同一个父元素，而且第二个元素必须紧跟第一个元素。
• 普通兄弟选择器使用 “~” 来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。