CSS前一个兄弟元素

在CSS中，可以使用伪类:first-child和:last-child来选择元素的第一个子元素和最后一个子元素。然而，有时我们可能需要选择元素的前一个兄弟元素，这时就可以使用:nth-last-child()伪类来实现。

什么是前一个兄弟元素

前一个兄弟元素即在DOM结构中紧邻目标元素之前的兄弟元素。例如，在下面的HTML结构中，<div class="target"></div>的前一个兄弟元素就是<p>Paragraph</p>。

<p>Paragraph</p>
<div class="target"></div>

如何选择前一个兄弟元素

要选择一个元素的前一个兄弟元素，可以使用:nth-last-child()伪类结合+符号来实现。:nth-last-child()可以接受一个参数n，表示选择倒数第n个子元素，而+符号用于选择紧邻的元素。

.target {
    color: red;
}

.target + p {
    /* 选择target元素前面的p元素 */
    font-weight: bold;
}

在上面的示例中，.target + p会选择.target之前的<p>元素，并将其加粗显示。

示例代码

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

<div>
    <p>Paragraph 1</p>
    <span>Span 1</span>
</div>
<div>
    <p>Paragraph 2</p>
    <span class="target">Span 2</span>
</div>
<div>
    <p>Paragraph 3</p>
    <span>Span 3</span>
</div>

现在，我们希望选中每个<span>元素的前一个兄弟元素，即相邻的<p>元素，并将其文本颜色设为红色。

span + p {
    color: red;
}

在上面的代码中，我们使用了span + p选择器来选中每个span元素前面的p元素，并将其文本颜色设为红色。

运行结果

根据以上的示例代码，我们可以得到以下的运行结果：

<div>
    <p style="color: red;">Paragraph 1</p>
    <span>Span 1</span>
</div>
<div>
    <p style="color: red;">Paragraph 2</p>
    <span class="target">Span 2</span>
</div>
<div>
    <p style="color: red;">Paragraph 3</p>
    <span>Span 3</span>
</div>

可以看到，每个<span>元素前面的<p>元素的文本颜色都被成功地设为了红色。