CSS 的上一个兄弟元素|极客教程

CSS 的上一个兄弟元素

在CSS中，我们经常会使用伪类来选择元素的不同状态或特定的位置。其中，:nth-child伪类用于选中元素的一个兄弟元素，但是如果我们想要选中的是上一个兄弟元素呢？

为什么可能需要选择上一个兄弟元素？

在一些布局设计中，有时我们需要对某个元素的上一个兄弟元素进行样式修改或者其他操作，这时如果能够选择上一个兄弟元素就会非常方便。比如，在处理表格样式的时候，我们希望鼠标悬停在某一行时，该行的上一行也有相应的样式变化。

使用 `:nth-child` 无法选择上一个兄弟元素

在CSS中，:nth-child 伪类被用来选中指定位置的子元素，但是却无法直接选中上一个兄弟元素。例如，我们有如下一个HTML结构：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

如果我们想要选中Item 3的上一个兄弟元素Item 2，我们无法直接使用:nth-child来实现。

使用 General Sibling Combinator（兄弟组合器）选择上一个兄弟元素

对于上一个兄弟元素，我们可以借助 CSS 的 General Sibling Combinator（兄弟组合器），它表示在同一父元素下，某个元素之后的所有兄弟元素。

General Sibling Combinator 的语法是 ~，例如：

selector1 ~ selector2 {
  /* styles */
}

在这里，selector1 是参考元素，~后面的 selector2 表示 selector1 之后的所有兄弟元素。

考虑之前的示例，如果我们想要选中 Item 2 这个上一个兄弟元素，可以这样写：

li:nth-child(3) ~ li:nth-child(2) {
  /* styles */
}

这段 CSS 代码表示选中第三个 li 元素之后的所有兄弟 li 元素中的第二个元素。

使用相邻兄弟选择符（Adjacent Sibling Selector）选择上一个兄弟元素

除了 General Sibling Combinator，我们还可以使用 Adjacent Sibling Selector（相邻兄弟选择符）来选择上一个兄弟元素。

Adjacent Sibling Selector 的语法是 +，例如：

selector1 + selector2 {
  /* styles */
}

这种选择器选择所有紧随在 selector1 之后的 selector2 元素。同样以前面的示例为例，如果我们想要选中 Item 2 这个上一个兄弟元素，可以这样写：

li:nth-child(3) + li {
  /* styles */
}

这段 CSS 代码表示选中第三个 li 元素之后紧邻的下一个 li 元素。

示例代码及效果演示

让我们通过一个简单的示例来演示如何选择上一个兄弟元素。考虑以下的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Previous Sibling Element</title>
  <style>
    li:nth-child(3) ~ li:nth-child(2) {
      color: red;
    }

    li:nth-child(3) + li {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</body>
</html>

在上面的代码中，我们使用 li:nth-child(3) ~ li:nth-child(2) 来选择第三个 li 元素之后的第二个 li 元素，并为其设置了红色的文本颜色。同时，我们使用 li:nth-child(3) + li 选择第三个 li 元素之后的下一个 li 元素，并为其设置了粗体字体。

在浏览器中打开这个HTML文件，你会看到第三个 li 元素之后的第二个 li 元素变成了红色，而第三个 li 元素之后的下一个 li 元素变成了粗体。

这就是如何通过 CSS 来选择上一个兄弟元素的方法。