CSS 选中当前元素上一个元素

在编写网页的过程中，我们经常需要通过CSS选择器选中某个元素的上一个元素，以实现一些特定的样式效果。本文将详细探讨如何使用CSS选择器选中当前元素的上一个元素。

为什么需要选中当前元素的上一个元素？

在网页设计中，有时我们需要对某个元素的上一个元素进行设置样式或其他操作。例如，当我们需要调整某个段落的样式时，可能需要选中段落的上一个标题元素，以实现特定的布局效果。

CSS选择器是一种强大的工具，可以帮助我们精确地选中DOM中的元素，从而实现各种样式效果。通过选择当前元素的上一个元素，我们可以更灵活地控制页面的布局和样式。

CSS选择器选中当前元素的上一个元素

在CSS中，有多种选择器可以实现选中当前元素的上一个元素。下面我们将介绍其中几种常用的方法：

1. 使用相邻兄弟选择器（Adjacent Sibling Selector）

相邻兄弟选择器可以选中某个元素的相邻兄弟元素。当我们需要选中当前元素的上一个元素时，可以使用+符号来连接两个元素的选择器，如下所示：

p + h1 {
  /* 样式设置 */
}

上面的代码中，p + h1表示选中所有紧接在“元素后面的<h1>元素。这样就可以实现选中当前元素的上一个元素的效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Selecting Previous Element</title>
  <style>
    p + h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <h1>Another Title</h1>
  <p>Paragraph 2</p>
</body>
</html>

运行结果

在上面的示例代码中，我们选中了每个段落后面的标题元素，设置了颜色为红色。因此，第一个标题元素“Title”会变为红色，而第二个标题元素“Another Title”不会受影响。

2. 使用通用兄弟选择器（General Sibling Selector）

通用兄弟选择器与相邻兄弟选择器类似，但它可以选中当前元素之后的所有兄弟元素。当我们需要选中当前元素的上一个元素及其前面的所有兄弟元素时，可以使用~符号来连接两个元素的选择器，如下所示：

p ~ h1 {
  /* 样式设置 */
}

上面的代码中，p ~ h1表示选中所有跟在<p>元素后面的所有<h1>元素。这样就可以实现选中当前元素的上一个元素及其前面的所有兄弟元素的效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Selecting Previous Element</title>
  <style>
    p ~ h1 {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Title</h1>
  <p>Paragraph 1
  Paragraph 2
  <h1>Title 2</h1>
</body>
</html>