首页　>　文章列表　>　如何为每个元素设置样式，使其紧邻的元素位于其之前？

如何为每个元素设置样式，使其紧邻的元素位于其之前？

元素设置样式紧邻
137 2023-09-15

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

在本文中，我们将看看如何为紧邻其前的元素设置样式

为元素设置相邻项目的样式

相邻的元素可以通过使用相邻兄弟选择器轻松地进行样式设置，该选择器将选择与选择器标签相邻或紧接在其后的元素，并且只能选择一个紧邻指定标签的标签。让我们来看一下相邻兄弟选择器的语法

语法

former_element + target_element {properties to be applied}

我们在选择元素时使用的选择器，以及与(+)选择器一起使用的选择器，都是不同类型的组合器，就像在这种情况下一样，两个选择器将通过(+)选择器组合在一起使用。为了更好地理解这一点，让我们看一个例子

Example

的中文翻译为：

示例

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

<!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>

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

在上面的输出中，我们可以看到标题和其下面的段落是使用兄弟选择器进行样式设置的。

组合器或选择器将分隔两个选择器，这里是图像和段落的第一行，然后是图像和段落的第二行。第二个元素必须跟在第一个元素后面，并且两者都应该是同一个父元素的子元素，就像下面的代码一样

img+p{
   color:red;
}

在上面的代码中，你可以看到图像是第一个子元素，而第二个子元素与兄弟连接器相连。

Example

的中文翻译为：

示例

让我们看另一个例子来更好地理解这个属性

<!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标签以及段落标签div和段落标签具有相同的颜色，因为我们使用了兄弟选择器。