CSS选择上一个兄弟|极客教程

CSS选择上一个兄弟

一、简介

在CSS中，选择兄弟元素是一种非常有用的技巧。除了选择下一个兄弟元素外，我们还可以选择上一个兄弟元素。通过使用CSS选择器，我们可以轻松地选择并修改上一个兄弟元素的样式。

在本篇文章中，我们将详细介绍使用CSS选择器选择上一个兄弟元素的方法，并提供一些示例代码以帮助读者更好地理解。

二、CSS选择上一个兄弟元素的方法

要选择上一个兄弟元素，我们需要使用CSS中的紧邻兄弟选择器。紧邻兄弟选择器由一个加号（+）表示，它在两个选择器之间，表示选择紧接在第一个选择器之后的兄弟元素。

下面是使用紧邻兄弟选择器选择上一个兄弟元素的基本语法：

element + previous-sibling-selector {
  /* 样式属性 */
}

其中，element是要选择的元素名称，previous-sibling-selector是选择上一个兄弟元素的选择器。

具体来说，previous-sibling-selector可以是以下几种选择器：

元素选择器：例如p、div等。
类选择器：例如.example等。
ID选择器：例如#example等。
伪类选择器：例如:hover、:nth-child(n)等。

三、示例代码

为了更好地理解如何选择上一个兄弟元素，我们提供一些示例代码，并给出代码运行结果。

1. 简单示例

<!DOCTYPE html>
<html>
<head>
  <style>
    p + .highlight {
      color: red;
    }
  </style>
</head>
<body>
  <p>文本内容1</p>
  <div class="highlight">文本内容2</div>
  <span>文本内容3</span>
  <div>文本内容4</div>
</body>
</html>

以上示例中，我们选择紧跟在<p>元素之后的具有.highlight类的上一个兄弟元素，并将其文字颜色设置为红色。根据示例代码，<div class="highlight">文本内容2</div>将被选中并将样式应用于其文字。

2. 选择特定类型的元素

<!DOCTYPE html>
<html>
<head>
  <style>
    p + div {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>文本内容1</p>
  <div>文本内容2（不会被选中）</div>
  <span>文本内容3</span>
  <div>文本内容4（会被选中）</div>
</body>
</html>

上述示例中，我们选择紧跟在<p>元素之后的类型为<div>的上一个兄弟元素，并将其背景颜色设置为黄色。根据示例代码，<div>文本内容4（会被选中）</div>将被选中并将样式应用于其背景色。

3. 选择具有特定类的元素

<!DOCTYPE html>
<html>
<head>
  <style>
    p + .highlight {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>文本内容1</p>
  <div class="highlight">文本内容2（会被选中）</div>
  <span>文本内容3</span>
  <div>文本内容4（不会被选中）</div>
</body>
</html>

以上示例中，我们选择紧跟在<p>元素之后具有.highlight类的上一个兄弟元素，并将其字体加粗。根据示例代码，<div class="highlight">文本内容2（会被选中）</div>将被选中并将样式应用于其字体。

4. 选择特定ID的元素

<!DOCTYPE html>
<html>
<head>
  <style>
    p + #special {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <p>文本内容1</p>
  <div id="special">文本内容2（会被选中）</div>
  <span>文本内容3</span>
  <div>文本内容4（不会被选中）</div>
</body>
</html>

上述示例中，我们选择紧跟在<p>元素之后具有id为special的上一个兄弟元素，并为其加上1像素的黑色边框。根据示例代码，<div id="special">文本内容2（会被选中）</div>将被选中并在其周围绘制一条黑色边框。