【前端-初阶】CSS复合选择器

CSS复合选择器是通过组合不同的基础选择器来创建更精确的选择器，以便选择DOM中更具体的元素。以下是一些常见的复合选择器及其用法：

1. 交集选择器（Element1Element2）：用于选择同时满足两个条件的元素，即既是Element1又是Element2。

div.example { /* 选择class为example的div元素 */
  color: red;
}

2. 并集选择器（Selector1, Selector2, ..., SelectorN）：用于选择任一条件满足的元素。

div, p { /* 选择div或p元素 */
  margin: 10px;
}

3. 后代选择器（Selector1 Selector2）：用于选择嵌套关系中的元素，即Selector2是Selector1的后代。

div span { /* 选择div的所有span后代 */
  color: blue;
}

4. 子选择器（Selector1 > Selector2）：用于选择直接子元素。

div > p { /* 选择div的直接子元素p */
  border: 1px solid black;
}

5. 相邻兄弟选择器（Selector1 + Selector2）：用于选择紧随Selector1的Selector2元素。

p + div { /* 选择紧跟在p元素后的第一个div元素 */
  margin-top: 20px;
}

6. 通用兄弟选择器（Selector1 ~ Selector2）：用于选择所有跟在Selector1后面的Selector2元素。

p ~ div { /* 选择所有跟在p元素后的div元素 */
  border-bottom: 1px dotted black;
}

这些复合选择器可以根据需要组合使用，以创建更加精准的样式规则。