【CSS】组合选择器

组合选择器（Combinator Selectors）是一种CSS选择器，用于选择满足多个选择器条件的特定元素。组合选择器由两个或多个简单选择器组合而成，它们描述了元素之间的关系。这些关系可以是父子关系、兄弟关系等，从而允许您更精确地选择元素以应用样式。

以下是一些常见的组合选择器及其示例：

1. 后代选择器（Descendant Selector）：选择指定元素内部的所有符合条件的后代元素。后代选择器使用空格分隔选择器。

   示例：

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

2. 子元素选择器（Child Selector）：选择指定元素的直接子元素。子元素选择器使用 > 符号分隔选择器。

   示例：

   ul > li {
     /* 选择 ul 元素内部的直接子元素 li 元素 */
   }
   

3. 相邻兄弟选择器（Adjacent Sibling Selector）：选择与指定元素在同一层级且紧接在它后面的元素。相邻兄弟选择器使用 + 符号分隔选择器。

   示例：

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

4. 通用兄弟选择器（General Sibling Selector）：选择与指定元素在同一层级的所有后续兄弟元素。通用兄弟选择器使用 ~ 符号分隔选择器。

   示例：

   h2 ~ p {
     /* 选择所有与 h2 元素在同一层级的 p 元素 */
   }
   

组合选择器允许您在选择元素时考虑它们之间的关系，从而更精确地应用样式。组合选择器通常与其他类型的选择器（如类、ID、属性选择器等）一起使用，以构建复杂的选择规则，从而实现各种不同的样式和布局效果。