CSS子元素选择器|极客教程

CSS子元素选择器

在CSS中，子元素选择器（child combinator selector）用于选择某个元素的直接子元素。子元素选择器使用大于号（>）来表示，它只会选择作为某个元素直接子元素的元素，而不会选择更深层次的后代元素。

基本语法

子元素选择器的基本语法如下所示：

parent > child {
    /* styles */
}

其中，parent表示父元素，child表示子元素，>表示子元素选择器。

下面我们通过一些示例代码来详细介绍子元素选择器的用法。

示例代码

示例1：选择直接子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素选择器示例</title>
    <style>
        .parent > .child {
            color: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">子元素1</div>
        <p>子元素2</p>
    </div>
</body>
</html>

Output:

CSS子元素选择器

在上面的示例中，我们使用子元素选择器.parent > .child选择.parent元素的直接子元素.child，并将其文字颜色设置为红色。运行代码后，只有子元素1的文字颜色变为红色，而子元素2的文字颜色不受影响。

示例2：选择多层子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素选择器示例</title>
    <style>
        .parent > .child {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">子元素1</div>
        <div>
            <div class="child">子元素2</div>
        </div>
    </div>
</body>
</html>

Output:

CSS子元素选择器

在上面的示例中，我们使用子元素选择器.parent > .child选择.parent元素的直接子元素.child，并将其文字颜色设置为蓝色。运行代码后，只有子元素1的文字颜色变为蓝色，而子元素2的文字颜色不受影响。

示例3：选择子元素的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素选择器示例</title>
    <style>
        .parent > .child > span {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            <span>子元素1</span>
        </div>
        <div class="child">
            <span>子元素2</span>
        </div>
    </div>
</body>
</html>

Output:

CSS子元素选择器