CSS组合器优先级

在本文中，我们将介绍CSS组合器优先级的概念及其使用方法。CSS组合器是用来选择HTML元素的方式，可以根据元素之间的关系来选择特定的元素进行样式设置。

阅读更多：CSS 教程

什么是CSS组合器？

CSS组合器是一种用于选择HTML元素的方式。组合器可以根据元素之间的关系选择特定的元素进行样式设置。在CSS中，有四种常用的组合器，分别是后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器。

后代选择器

后代选择器选择某个元素的所有后代元素。它使用空格来表示元素之间的关系。例如，如果我们想选择<div>元素下的所有“元素，可以使用后代选择器的语法div p。

div p {
  color: red;
}

子元素选择器

子元素选择器选择某个元素的直接子元素。它使用大于号（>）来表示元素之间的关系。例如，如果我们想选择<ul>元素下的所有直接子元素<li>，可以使用子元素选择器的语法ul > li。

ul > li {
  list-style-type: circle;
}

相邻兄弟选择器

相邻兄弟选择器选择某个元素的下一个相邻兄弟元素。它使用加号（+）来表示元素之间的关系。例如，如果我们想选择<h1>元素后面的相邻兄弟元素<p>，可以使用相邻兄弟选择器的语法h1 + p。

h1 + p {
  font-weight: bold;
}

通用兄弟选择器

通用兄弟选择器选择某个元素之后的所有兄弟元素。它使用波浪号（~）来表示元素之间的关系。例如，如果我们想选择<h2>元素后面的所有兄弟元素<p>，可以使用通用兄弟选择器的语法h2 ~ p。

h2 ~ p {
  text-indent: 2em;
}

组合器优先级

当多个组合器同时存在时，它们的优先级如下：

相邻兄弟选择器 > 子元素选择器 > 后代选择器 > 通用兄弟选择器

即相邻兄弟选择器具有最高的优先级，通用兄弟选择器具有最低的优先级。

为了更好地理解组合器优先级，让我们看一个示例。假设我们有以下HTML结构：

<div>
  <p class="first">First paragraph
  <div>
    <p class="second">Second paragraph</p>
  </div>
</div>

现在，我们为这些元素设置如下样式：

div p {
  color: red;
}

div > p {
  color: blue;
}

div + div p {
  color: green;
}

div ~ div p {
  color: purple;
}

在这个示例中，.first段落样式的优先级最低，其颜色为红色，因为它被应用了最后面的div p选择器。.second段落样式的优先级稍高，其颜色为蓝色，因为它被应用了中间的div > p选择器。而最后一个段落的样式优先级最高，其颜色为绿色，因为它被应用了最前面的div + div p选择器。