CSS 选择器获取上一个元素|极客教程

CSS 选择器获取上一个元素

在CSS中，我们经常需要通过选择器来获取元素并对其进行样式设置。有时候我们需要选择某个元素的上一个元素，这时就需要使用一些特殊的选择器来实现。本文将详细介绍如何使用CSS选择器获取上一个元素，并提供多个示例代码来帮助读者更好地理解。

1. 相邻兄弟选择器

相邻兄弟选择器（Adjacent Sibling Selector）用于选择指定元素的下一个兄弟元素。通过在两个元素之间使用加号（+）来实现选择上一个元素的效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adjacent Sibling Selector Example</title>
<style>
    p + div {
        color: red;
    }
</style>
</head>
<body>
    <p>geek-docs.com</p>
    <div>This is the previous element</div>
</body>
</html>

Output:

CSS 选择器获取上一个元素

在上面的示例中，我们使用了相邻兄弟选择器p + div来选择<div>元素，然后对其设置了红色的文字颜色。这样就实现了选择上一个元素的效果。

2. 通用兄弟选择器

通用兄弟选择器（General Sibling Selector）用于选择指定元素之后的所有兄弟元素。通过在两个元素之间使用波浪号（~）来实现选择上一个元素的效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>General Sibling Selector Example</title>
<style>
    p ~ div {
        font-weight: bold;
    }
</style>
</head>
<body>
    geek-docs.com
    <div>This is the previous element</div>
    <span>This is another sibling element</span>
</body>
</html>

Output:

CSS 选择器获取上一个元素

在上面的示例中，我们使用了通用兄弟选择器p ~ div来选择所有跟在<p>元素后面的<div>元素，并对其设置了加粗的字体样式。

3. :nth-last-child伪类选择器

:nth-last-child伪类选择器用于选择父元素中倒数第n个子元素。通过结合使用:nth-last-child和:nth-child可以实现选择上一个元素的效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:nth-last-child Pseudo-class Selector Example</title>
<style>
    p:nth-last-child(2) {
        text-decoration: underline;
    }
</style>
</head>
<body>
    <div>
        <p>geek-docs.com</p>
        <p>This is the previous element</p>
        <p>This is another element</p>
    </div>
</body>
</html>

Output:

CSS 选择器获取上一个元素

在上面的示例中，我们使用了:nth-last-child(2)来选择父元素中倒数第二个<p>元素，并对其设置了下划线样式。

4. :not伪类选择器

:not伪类选择器用于选择除了指定元素之外的所有元素。通过结合使用:not和:nth-last-child可以实现选择上一个元素的效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:not Pseudo-class Selector Example</title>
<style>
    p:not(:last-child) {
        color: blue;
    }
</style>
</head>
<body>
    <div>
        <p>geek-docs.com</p>
        <p>This is the previous element</p>
        <p>This is another element</p>
    </div>
</body>
</html>

Output:

CSS 选择器获取上一个元素

在上面的示例中，我们使用了:not(:last-child)来选择除了最后一个<p>元素之外的所有<p>元素，并对其设置了蓝色的文字颜色。

5. :empty伪类选择器

:empty伪类选择器用于选择没有子元素的元素。通过结合使用:empty和:nth-last-child可以实现选择上一个元素的效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:empty Pseudo-class Selector Example</title>
<style>
    p:empty {
        background-color: yellow;
    }
</style>
</head>
<body>
    <div>
        <p>geek-docs.com</p>
        <p></p>
        <p>This is another element</p>
    </div>
</body>
</html>