HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

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

htmlcssweb developmentfront end technology更新于 2025/1/30 13:32:17

选择器是 CSS 样式的重要组成部分，因为所有应用于元素的属性都是使用选择器完成的。此外，还可以根据元素与其他元素的关系(例如，元素具有前导元素或序列中的任何其他元素)来选择元素。选择器包括兄弟选择器、子选择器和相邻兄弟选择器。

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

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

可以使用相邻兄弟选择器轻松地为彼此相邻的元素设置样式，该选择器将选择相邻的元素或位于指定选择器标签旁边的元素，并且只能选择位于指定标签旁边的一个标签。让我们看一下相邻兄弟选择器的语法

语法

former_element + target_element {properties to be applied}

我们用于选择元素的选择器以及 (+) 选择器都是不同类型的组合器，例如在本例中，两个选择器将通过它们之间的 (+) 选择器组合使用。为了更好地理解这一点，让我们看一个例子

示例

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

<!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.cainiaomax.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;
}

在上面的代码中，您可以看到图像是与同级连接器连接的第一个子项和第二个子项。

示例

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

<!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 和段落标签的颜色相同，因为我们使用了同级选择器。

什么是同级选择器?

有两种同级连接器:通用同级连接器和相邻的同级选择器。它主要用于选择一组共享同一父元素的元素。

相邻兄弟选择器选择与指定标签相邻或相邻的元素，同时选择指定标签相邻的一个标签。

(+) 用于相邻兄弟选择器

(~) 用于通用兄弟选择器

结论

连接器用于指定两个选择器之间的关系，相邻兄弟选择器也是这些连接器的一部分。(+) 符号将用于选择与第一个选定元素相邻的元素。这些选择器允许开发人员设置彼此相邻或具有相同父元素的元素的样式。

在本文中，我们了解了如何为每个具有

的元素设置样式。

相关文章

有用资源

打印 下一节:使用 CSS 绘制文字肖像? ❯❮ 上一节:如何使用 HTML 和 CSS 创建非矩形标题