CSS 如何为紧邻其前一个元素的每个元素设置样式

选择器是CSS样式中的重要组成部分，应用于元素的所有属性都是使用选择器来完成的。还可以根据元素与其他元素的关系选择元素，比如具有前一个元素或者系列中的其他元素。有兄弟选择器、子选择器和相邻兄弟选择器等。

在本文中，我们将讨论如何为紧邻其前一个元素的元素设置样式。

使用紧邻项为元素设置样式

相邻的元素可以使用相邻兄弟选择器轻松设置样式。相邻兄弟选择器将选择与指定的选择器标签相邻的元素，只能选择一个紧邻指定标签的标签。让我们看一下相邻兄弟选择器的语法。

语法

former_element + target_element {properties to be applied}

我们在使用选择器选择元素时，同时使用了（+）选择器，这些选择器都是不同类型的组合器，就像在这个示例中一样，2个选择器将被（+）选择器组合在一起。为了更好地理解，让我们看一个示例

示例

选择器只会选择连续出现的兄弟元素，这意味着这两个元素将共享同一个父元素。让我们看一下示例的代码

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of styling every element which will be adjacent item right before it</title>
      <style>
         h1 {
            color: lightblue;
         }
         img + p {
            color: yellow;
         }
         img + p + p {
            color: darkblue;
            img + p {
               color: yellow;
            }
         }
      </style>
   </head>
   <body>
      <center>
         <h1>Hello, welcome to an example</h1>
         <img src="https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="scenery image" />
         <p>this is the first paragraph coming after the image</p>
         <p>this is the second paragraph coming after the image</p>
         <p>this is the third paragraph coming after the image</p>
      </center>
   </body>
</html>

在上面的代码中，我们首先创建了一个标题标签，然后在标题后面使用了一张图片，然后添加了三行段落。我们使用兄弟选择器来为它们添加样式。(+)号在图片选择器和段落选择器之间告诉我们图片和段落之间的关系。

在上面的输出中，我们可以看到标题和其下方的段落都使用了兄弟组合器来添加样式。

这个组合器或选择器将分开2个选择器，即图片和段落的第一行，然后是图片和段落的第二行。第二个元素必须跟在第一个元素后面，并且两者都应该是同一个父元素的子元素，如以下代码所示：

img+p{
   color:red;
}

在上面的代码中，您可以看到图像是兄弟连接符链接的第一个子元素和第二个子元素。

示例

让我们看一个更好地理解该属性的示例。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Another example of the sibling connector </title>
      <style>
         div+p {
            font-weight: bold;
            color: lightgreen;
            margin: 0px;
            font-size: 37px;
            text-align: center;
         }
         h2 {
            color: lightblue;
         }
         p {
            text-align: center;
         }
         div {
            text-align: center;
         }
      </style>
   </head>
   <body>
      <center>
         <h1>Hi, this is an example </h1>
         <div>An example of Adjacent sibling selector property</div>
         <p>How is your day going?</p>
         <div>
            <div>This is the child element</div>
            <p>Good morning</p>
         </div>
         <p>Good Evening</p>
         <p>Good Night</p>
      </center>
   </body>
</html>

在上面的代码中创建了标题，并将其与段落一起放入容器中，然后在CSS部分，我们给标题赋予了一种颜色以区分，然后使用兄弟组合选择器与段落标签一起使用，因此我们可以同时为段落和div设置样式。

让我们看一下使用以下代码后得到的输出。

在上面的示例中，您可以看到标题标签具有另一种颜色，而div和段落标签具有相同的颜色，因为我们使用了兄弟选择器。