CSS 组合选择符

CSS组合选择符允许你根据文档中元素之间的关系进行选择，从而更精确地定位元素。以下是一些常用的CSS组合选择符。

后代选择符

后代选择符（或空格）用于选择某个元素的后代元素。例如，以下CSS规则将选择所有div元素的后代p元素：

div p {
  color: red;
}

这意味着一旦您将CSS规则应用于HTML文档中的div元素，所有后代p元素的文本将呈现为红色。

子代选择符（>）用于选择某个元素的直接子元素。例如，以下CSS规则将选择所有ul元素的直接li子元素：

ul > li {
  color: blue;
}

这意味着只有直接在ul元素内部嵌套的li元素将被选中。

相邻兄弟选择符（+）用于选择紧接在另一个特定元素之后的元素。例如，以下CSS规则将选择紧接在div元素之后的span元素：

div + span {
  color: green;
}

这意味着只有紧接在div元素之后的span元素才会被选中。

通用兄弟选择符（~）用于选择与另一个特定元素处于相同层级且在其之后的所有元素。例如，以下CSS规则将选择所有与h2元素处于同一层级的且在它之后的p元素：

h2 ~ p {
  color: orange;
}

这意味着只要某个p元素与h2元素处于同一层级，并且p元素出现在h2元素之后，它就会被选中。

您可以像字符串一样，将多个组合选择符组合在一起，以更精确地定位元素。例如，以下CSS规则将选择所有article元素内的直接h1元素中的第一个span元素：

article > h1:first-child + p > span {
  color: pink;
}

这意味着只有满足这些条件的span元素将被选中。

使用CSS组合选择符，您可以更精确地定位要样式化的元素。了解它们可以使您更好地理解CSS选择器的工作原理，并使您的样式表更易于维护。