极客教程CSS选择前一个兄弟节点
在CSS中，我们经常遇到需要选择某个元素的前一个兄弟节点的情况，这时候就需要使用一些特殊的CSS选择器来实现这个功能。在本文中，我们将详细讨论如何使用CSS选择前一个兄弟节点。
什么是前一个兄弟节点
在HTML文档中，兄弟节点指的是具有相同父元素的元素。前一个兄弟节点就是指在同一个父元素下位于当前元素之前的兄弟节点。例如，在以下HTML代码中：
<div>
<p>第一个兄弟节点</p>
<p>第二个兄弟节点</p>
<p id="target">目标元素</p>
<p>第四个兄弟节点</p>
</div>
在这个示例中，p元素”第二个兄弟节点”是元素”目标元素”的前一个兄弟节点。
使用CSS选择前一个兄弟节点
为了选择元素的前一个兄弟节点，我们可以使用CSS中的兄弟选择器和相邻兄弟选择器来实现。
兄弟选择器(~)
兄弟选择器（tilde符号~）可以选择前面所有匹配指定选择器的兄弟元素。我们可以通过将目标元素与其前一个兄弟元素用兄弟选择器连接起来来实现选择前一个兄弟节点的效果。例如：
#target ~ p {
color: red;
}
上面的代码将会选择元素”目标元素”之后的所有p元素，并将它们的文字颜色设置为红色。这样就实现了选择前一个兄弟节点的效果。
相邻兄弟选择器(+)
相邻兄弟选择器（加号符号+）可以选择紧接在指定元素后面的兄弟元素。我们可以通过将目标元素与其前一个兄弟元素用相邻兄弟选择器连接起来来实现选择前一个兄弟节点的效果。例如：
#target + p {
font-weight: bold;
}
上面的代码将会选择元素”目标元素”紧接着的那个p元素，并将它的文字设置为加粗。这样就实现了选择前一个兄弟节点的效果。
实际应用
下面我们通过一个具体的示例来演示如何使用CSS选择前一个兄弟节点。假设我们有以下HTML代码：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li class="selected">橙子</li>
<li>西瓜</li>
</ul>
我们想要为被选中的水果添加一个特殊的样式，同时也想为被选中水果的前一个兄弟节点添加一个特殊的样式。我们可以通过以下CSS代码来实现：
.selected {
color: red;
}
.selected + li {
font-weight: bold;
}
这样，就会将被选中的水果文本设置为红色，同时将被选中水果的前一个兄弟节点文本设置为加粗。
结论
在本文中，我们详细讨论了如何使用CSS选择前一个兄弟节点。通过使用兄弟选择器和相邻兄弟选择器，我们可以方便地选择元素的前一个兄弟节点，并为其添加样式或执行其他操作。