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>