CSS CSS选择器: 如果存在相邻兄弟元素的情况下

在本文中，我们将介绍CSS中的选择器，特别是在选择相邻兄弟元素的情况下的使用方法。CSS选择器是CSS的重要部分，用于指定哪些HTML元素应该应用特定的样式。

阅读更多：CSS 教程

相邻兄弟选择器

CSS中的相邻兄弟选择器（Adjacent Sibling Selector）用于选择在同一父元素下的兄弟元素。

相邻兄弟选择器使用加号（+）符号表示。它选择的是与给定的元素之后紧邻的兄弟元素。

以下是相邻兄弟选择器的语法：

element + sibling

其中，element表示选择中的元素，sibling表示要选择的相邻兄弟元素。

让我们来看一个示例，以更好地理解相邻兄弟选择器的使用方法：

<div>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
  <p>这是第三个段落。</p>
  <p>这是第四个段落。</p>
</div>

<style>
  p + p {
    color: red;
  }
</style>

在上述示例中，第二个段落和第三个段落之间有一个相邻的兄弟关系。我们使用了相邻兄弟选择器将第二个段落之后的所有段落文字颜色设为红色。

如果存在相邻兄弟元素的情况下

有时，我们希望只在某个元素后面存在特定的相邻兄弟元素时应用某些样式。在CSS中，我们可以使用伪类选择器:has()和:not()来实现这一点。

:has() 伪类选择器

:has()伪类选择器表示选择包含指定选择器所匹配的元素的父元素。

以下是:has()伪类选择器的语法：

parent:has(selector)

其中，parent表示选择器所匹配的元素的父元素，selector表示要匹配的元素。

让我们通过一个示例来说明:has()伪类选择器如何选择存在相邻兄弟元素的情况下的元素：

<div>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
  <p>这是第三个段落。</p>
  <p>这是第四个段落。</p>
</div>

<style>
  div:has(p + p) {
    background-color: yellow;
  }
</style>

在上述示例中，我们使用:has()伪类选择器选择存在相邻兄弟元素的div元素，并将其背景颜色设为黄色。

:not() 伪类选择器

:not()伪类选择器表示选择不符合指定选择器的元素。

以下是:not()伪类选择器的语法：

:not(selector)

其中，selector表示要不匹配的元素。

让我们通过一个示例来说明:not()伪类选择器如何选择存在相邻兄弟元素的情况下的元素：

<div>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
  <div>
    <p>这是嵌套在div中的段落。</p>
  </div>
  <p>这是第四个段落。</p>
</div>

<style>
  p:not(:last-child) + p {
    color: blue;
  }
</style>

在上述示例中，我们使用:not()伪类选择器选择除最后一个p元素外的所有p元素的相邻兄弟元素，并将其文字颜色设为蓝色。