CSS选择第一个和第二个子元素|极客教程

CSS选择第一个和第二个子元素

在网页开发中，我们经常需要对页面中的元素进行样式设置或操作。通过CSS选择器，我们可以方便地选择特定的元素并对其进行处理。在本文中，我们将探讨如何使用CSS选择器选择第一个和第二个子元素。

选择第一个子元素

要选择第一个子元素，我们可以使用:first-child伪类选择器。这个选择器会选择对应父元素的第一个子元素，并对其应用样式。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择第一个子元素</title>
<style>
    ul li:first-child {
        color: blue;
        font-weight: bold;
    }
</style>
</head>
<body>

<ul>
    <li>第一个子元素</li>
    <li>第二个子元素</li>
    <li>第三个子元素</li>
</ul>

</body>
</html>

在上面的示例代码中，我们对ul元素的第一个li子元素应用了样式，使其文字颜色为蓝色且加粗。

运行结果

当我们在浏览器中打开上面的示例代码时，会看到第一个子元素的文字变为蓝色且加粗，而其余子元素没有改变。

选择第二个子元素

要选择第二个子元素，我们可以结合使用: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>选择第二个子元素</title>
<style>
    ul li:first-child + li {
        color: red;
        font-style: italic;
    }
</style>
</head>
<body>

<ul>
    <li>第一个子元素</li>
    <li>第二个子元素</li>
    <li>第三个子元素</li>
</ul>

</body>
</html>

在上面的示例代码中，我们通过使用:first-child选择第一个li子元素，然后通过+相邻兄弟选择器选择第一个子元素的相邻兄弟元素来对第二个子元素应用样式，使其文字颜色为红色且斜体。