CSS 选中父元素

在CSS中，我们经常需要对子元素进行样式设置，但有时候我们也需要对父元素进行样式设置。本文将介绍如何使用CSS选择器选中父元素，并对其进行样式设置。

1. 使用 :has 伪类选择包含特定子元素的父元素

:has 伪类可以选择包含特定子元素的父元素。例如，我们可以选择包含特定类名的子元素的父元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
.parent:has(.child) {
    background-color: lightblue;
}
.child {
    color: white;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">sotoolbox.com</div>
</div>
<div class="parent">
    <div class="child">example.com</div>
</div>
</body>
</html>

代码运行结果:

在上面的示例中，我们使用 :has(.child) 选择器选中包含类名为 .child 的子元素的父元素，并对其设置背景颜色为 lightblue。

2. 使用 :not 伪类排除特定子元素的父元素

:not 伪类可以排除特定子元素的父元素。例如，我们可以排除包含特定类名的子元素的父元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
.parent:not(:has(.child)) {
    background-color: lightblue;
}
.child {
    color: white;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">sotoolbox.com</div>
</div>
<div class="parent">
    <div>example.com</div>
</div>
</body>
</html>

代码运行结果:

在上面的示例中，我们使用 :not(:has(.child)) 选择器排除包含类名为 .child 的子元素的父元素，并对其设置背景颜色为 lightblue。

3. 使用 :nth-child 伪类选择特定位置的父元素

:nth-child 伪类可以选择特定位置的父元素。例如，我们可以选择第二个子元素的父元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
.parent:nth-child(2) {
    background-color: lightblue;
}
.child {
    color: white;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">sotoolbox.com</div>
</div>
<div class="parent">
    <div class="child">example.com</div>
</div>
</body>
</html>

代码运行结果:

在上面的示例中，我们使用 :nth-child(2) 选择器选择第二个子元素的父元素，并对其设置背景颜色为 lightblue。

4. 使用 :nth-last-child 伪类选择倒数特定位置的父元素

:nth-last-child 伪类可以选择倒数特定位置的父元素。例如，我们可以选择倒数第二个子元素的父元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
.parent:nth-last-child(2) {
    background-color: lightblue;
}
.child {
    color: white;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">sotoolbox.com</div>
</div>
<div class="parent">
    <div class="child">example.com</div>
</div>
</body>
</html>

代码运行结果:

在上面的示例中，我们使用 :nth-last-child(2) 选择器选择倒数第二个子元素的父元素，并对其设置背景颜色为 lightblue。

5. 使用 :first-child 伪类选择第一个子元素的父元素

:first-child 伪类可以选择第一个子元素的父元素。例如，我们可以选择第一个子元素的父元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
.parent:first-child {
    background-color: lightblue;
}
.child {
    color: white;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">sotoolbox.com</div>
</div>
<div class="parent">
    <div class="child">example.com</div>
</div>
</body>
</html>

代码运行结果:

在上面的示例中，我们使用 :first-child 选择器选择第一个子元素的父元素，并对其设置背景颜色为 lightblue。

6. 使用 :last-child 伪类选择最后一个子元素的父元素

:last-child 伪类可以选择最后一个子元素的父元素。例如，我们可以选择最后一个子元素的父元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
.parent:last-child {
    background-color: lightblue;
}
.child {
    color: white;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">sotoolbox.com</div>
</div>
<div class="parent">
    <div class="child">example.com</div>
</div>
</body>
</html>

代码运行结果:

在上面的示例中，我们使用 :last-child 选择器选择最后一个子元素的父元素，并对其设置背景颜色为 lightblue。

7. 使用 :only-child 伪类选择唯一一个子元素的父元素

:only-child 伪类可以选择唯一一个子元素的父元素。例如，我们可以选择只有一个子元素的父元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
.parent:only-child {
    background-color: lightblue;
}
.child {
    color: white;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">sotoolbox.com</div>
</div>
</body>
</html>

代码运行结果:

在上## 8. 使用 :empty 伪类选择没有子元素的父元素

:empty 伪类可以选择没有子元素的父元素。例如，我们可以选择没有子元素的父元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
.parent:empty {
    background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
</div>
<div class="parent">
    <div class="child">sotoolbox.com</div>
</div>
</body>
</html>

代码运行结果:

在上面的示例中，我们使用 :empty 选择器选择没有子元素的父元素，并对其设置背景颜色为 lightblue。

9. 使用 :not(:empty) 伪类选择有子元素的父元素

:not(:empty) 伪类可以选择有子元素的父元素。例如，我们可以选择有子元素的父元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
.parent:not(:empty) {
    background-color: lightblue;
}
.child {
    color: white;
}
</style>
</head>
<body>
<div class="parent">
</div>
<div class="parent">
    <div class="child">sotoolbox.com</div>
</div>
</body>
</html>

代码运行结果:

在上面的示例中，我们使用 :not(:empty) 选择器选择有子元素的父元素，并对其设置背景颜色为 lightblue。

10. 使用 :root 伪类选择文档的根元素

:root 伪类可以选择文档的根元素。例如，我们可以选择文档的根元素，并对其进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选中父元素</title>
<style>
:root {
    font-size: 16px;
}
</style>
</head>
<body>
<h1>sotoolbox.com</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

代码运行结果: