CSS获取第一个子元素

在Web开发中，我们经常会需要操作HTML元素的子元素。有时候，我们只想选择第一个子元素来应用特定的样式或行为。在这种情况下，我们可以使用CSS来获取第一个子元素。

使用: first-child 伪类

在CSS中，可以使用:first-child伪类来选择一个元素的第一个子元素。这个伪类会选择指定元素的第一个子元素，无论它是什么类型的元素。

示例代码如下：

<!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>First Child Example</title>
    <style>
        .parent {
            background-color: lightgray;
            padding: 10px;
        }

        .child {
            margin-bottom: 5px;
            padding: 5px;
            background-color: lightblue;
        }

        .child:first-child {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">First Child</div>
        <div class="child">Second Child</div>
        <div class="child">Third Child</div>
    </div>
</body>
</html>

在上面的示例中，我们创建了一个包含三个子元素的父元素.parent，每个子元素都有.child类。我们使用.child:first-child选择器来选择.parent元素的第一个子元素，将其背景色设置为lightgreen。

当我们在浏览器中运行这段代码时，我们会看到第一个子元素的背景色被设置为lightgreen，如下图所示：

First Child
Second Child
Third Child

这表明我们成功地使用:first-child伪类选择了第一个子元素，并为其应用了特定的样式。

使用:first-of-type伪类

除了:first-child伪类以外，CSS还提供了:first-of-type伪类，它可以选择元素的第一个指定类型的子元素。

示例代码如下：

<!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>First of Type Example</title>
    <style>
        .parent {
            background-color: lightgray;
            padding: 10px;
        }

        .child {
            margin-bottom: 5px;
            padding: 5px;
            background-color: lightblue;
        }

        .child:first-of-type {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <span class="child">First Child</span>
        <div class="child">Second Child</div>
        <div class="child">Third Child</div>
    </div>
</body>
</html>

在这个示例中，我们把第一个子元素改为了<span>标签，而不是之前的<div>。通过.child:first-of-type选择器，我们成功地选择了第一个<span>元素，将其背景色设置为lightcoral。

当我们在浏览器中运行这段代码时，我们会看到第一个<span>子元素的背景色被设置为lightcoral，如下图所示：