CSS选择器前一个兄弟元素

在CSS中，选择器是一种用来确定哪些元素将会被样式化的方法。当我们想要选择某个元素的前一个兄弟元素时，可以使用CSS的相邻兄弟选择器（Adjacent Sibling Selector）来实现。

什么是相邻兄弟选择器？

相邻兄弟选择器用于选择紧接在另一个元素后的元素。在CSS中，相邻兄弟选择器的符号是“+”。它的格式为：

element1 + element2 {
    /* styles */
}

其中，element1是前一个兄弟元素，而element2则是后一个兄弟元素。只有当element2紧接在element1后面时，样式才会被应用到element2上。

如何使用相邻兄弟选择器？

让我们通过一个简单的示例来演示如何使用相邻兄弟选择器。假设我们有一个HTML文档，其中包含一组列表项。我们想要使每个列表项的前一个兄弟元素（如果有的话）变为红色。

<!DOCTYPE html>
<html>
<head>
    <style>
        .list-item + .list-item {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="list-item">Item 1</li>
        <li class="list-item">Item 2</li>
        <li class="list-item">Item 3</li>
    </ul>
</body>
</html>

在上面的示例中，我们使用了.list-item + .list-item选择器来选择紧接在前一个.list-item元素后的.list-item元素。我们为这样的元素设置了红色的文本颜色。因此，Item 2和Item 3会变成红色。