CSS 使用选择器选择元素的前一个兄弟元素

在本文中，我们将介绍如何使用CSS选择器选择元素的前一个兄弟元素。CSS选择器是一种强大且灵活的工具，可以根据元素的层次结构和属性选择元素。

要选择一个元素的前一个兄弟元素，我们可以使用CSS选择器中的“+”符号。该符号表示选取元素紧接在指定元素后面的所有兄弟元素，即选择元素之后的兄弟元素。

下面是一个示例，演示了如何使用CSS选择器选择元素的前一个兄弟元素：

<!DOCTYPE html>
<html>
<head>
<style>
p + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS Select the preceding sibling of an element using selectors</h2>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

</body>
</html>

在上面的示例中，我们使用CSS选择器 p + p 来选择第一个段落元素的前一个兄弟元素。我们为选中的元素设置了背景颜色为黄色。这样，第二个段落元素的背景颜色将会发生变化。

通过使用CSS选择器选择元素的前一个兄弟元素，我们可以轻松地对选中的元素进行样式上的修改或者与之相关的交互。

阅读更多：CSS 教程

更多示例

除了使用简单的选择器选择元素的前一个兄弟元素之外，我们还可以结合使用其他CSS选择器来更精确地选择目标元素。

选择特定的前一个兄弟元素

要选择一个特定的前一个兄弟元素，我们可以使用元素的类选择器或者ID选择器来匹配元素。下面是一个示例，演示了如何选择一个带有特定类的元素的前一个兄弟元素：

<!DOCTYPE html>
<html>
<head>
<style>
.red + .blue {
  color: blue;
}
</style>
</head>
<body>

<h2>CSS Select a specific preceding sibling of an element using selectors</h2>

<p class="red">This is some text.</p>
<p class="blue">This is some other text.</p>
<p class="red">This is some more text.</p>

</body>
</html>

在上面的示例中，我们使用了类选择器 .red 和 .blue 来选择元素的前一个兄弟元素。我们为选中的元素设置了文字颜色为蓝色。这样，第二个段落元素的文字颜色将会发生变化。

使用属性选择器选择前一个兄弟元素

除了类选择器，我们还可以使用属性选择器来选择元素的前一个兄弟元素。属性选择器允许我们通过元素的属性值来选择元素。下面是一个示例，演示了如何使用属性选择器选择一个带有特定属性值的元素的前一个兄弟元素：

<!DOCTYPE html>
<html>
<head>
<style>
[type="checkbox"] + label {
  color: green;
}
</style>
</head>
<body>

<h2>CSS Select a preceding sibling of an element using attribute selectors</h2>

<input type="checkbox" id="checkbox1" checked>
<label for="checkbox1">Checkbox 1</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Checkbox 2</label>

</body>
</html>

在上面的示例中，我们使用了属性选择器 [type="checkbox"] 和标签选择器 label 来选择元素的前一个兄弟元素。我们为选中的元素设置了文字颜色为绿色。这样，第二个复选框的标签文字颜色将会发生变化。