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

CSS选择上一个兄弟元素

在CSS中，我们可以使用兄弟选择器来选择元素的兄弟元素。兄弟元素是具有相同父元素的元素，而不一定是相邻的元素。在本文中，我们将深入研究如何选择元素的上一个兄弟元素。

使用兄弟选择器

在CSS中，我们可以使用兄弟选择器（~）来选择元素的所有兄弟元素。如果想选择元素的上一个兄弟元素，可以结合使用通用兄弟选择器（~）和first-child伪类选择器（:first-child）来实现。

下面是一个简单的示例，说明如何选择元素的上一个兄弟元素：

<!DOCTYPE html>
<html>
<head>
<style>
    div ~ span:first-child {
        color: red;
    }
</style>
</head>
<body>

<div>This is a div element.</div>
<span>This is the first span element.</span>
<span>This is the second span element.</span>

</body>
</html>

在上面的示例中，我们选择了所有<span>元素的上一个兄弟元素，并将其文字颜色设为红色。运行这段代码后，第一个<span>元素的文字颜色将会变为红色。

使用JavaScript实现

如果想要选择元素的上一个兄弟元素并进行一些操作，可以使用JavaScript来实现。下面是一个示例代码，展示了如何使用JavaScript选择元素的上一个兄弟元素并改变其样式：

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

<div>This is a div element.</div>
<p>This is the first paragraph element.</p>
<p>This is the second paragraph element.</p>

<script>
    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(paragraph => {
        paragraph.addEventListener('click', () => {
            // 选择上一个兄弟元素并添加CSS类
            if (paragraph.previousElementSibling) {
                paragraph.previousElementSibling.classList.add('selected');
            }
        });
    });
</script>

</body>
</html>

在上面的示例中，我们首先选取了所有的<p>元素，并为每个元素添加了一个点击事件监听器。当点击一个<p>元素时，将会选择它的上一个兄弟元素（如果存在），并为其添加一个名为selected的CSS类，从而改变其文字颜色为红色。