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:
在上面的示例中,我们使用了相邻兄弟选择器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:
在上面的示例中,我们使用了通用兄弟选择器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:
在上面的示例中,我们使用了: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:
在上面的示例中,我们使用了: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>
Output:
在上面的示例中,我们使用了:empty来选择没有子元素的<p>
元素,并对其设置了黄色的背景颜色。