CSS |元素+元素选择器(1)

📌 相关文章

📜 CSS |元素+元素选择器(1)

📅 最后修改于: 2023-12-03 15:14:19.747000 🧑 作者: Mango

CSS | 元素+元素选择器

在CSS中，元素+元素选择器（也称为相邻兄弟选择器）可以选取紧接在另一个元素后的元素。这个选择器需要两个相邻的元素，第一个元素是兄弟结点的前一个兄弟结点，第二个元素是那个兄弟结点本身。这个选择器通常用于想要选择一个特定元素之后紧贴着的兄弟元素。

语法

元素除了选择器之外的标记符号表示选择器之间的关系。在 CSS 中，常用的关系选择器有以下几种：

空格（）：表示后代元素选择器
>：表示子元素选择器
+：表示相邻兄弟选择器
~：表示通用兄弟选择器

元素+元素选择器使用 + 符号，语法如下：

selector1 + selector2 {
  property:value;
}

selector1：元素的前一个兄弟结点
+：相邻兄弟选择器
selector2：元素本身

示例

以下示例中，我们将使用一个 HTML 文件，其中包含三个段落元素（<p>）。我们将使用元素+元素选择器来选择第二个段落元素（<p>）之后的 <ul> 元素。

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      p + ul {
        background-color: #f1f1f1;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <p>段落1</p>
    <p>段落2</p>
    <ul>
      <li>列表1</li>
      <li>列表2</li>
    </ul>
    <p>段落3</p>
  </body>
</html>

CSS

p + ul {
  background-color: #f1f1f1;
  padding: 20px;
}

输出

此示例会选择第二个段落元素（<p>）之后的 <ul> 元素，并应用背景颜色和填充属性。

元素+元素选择器示例输出

总结

元素+元素选择器提供了一种简单的方式来选择一个元素之后紧贴着的兄弟元素。此选择器在选择特定的子元素或兄弟元素时非常有用，但在使用相邻的选择器的过程中要小心，因为它仅选择紧接在前一个元素后面的元素。