CSS 取前3个子元素

在前端开发中，有时候我们需要选择某个元素的前几个子元素进行样式设置，这时候就可以使用CSS来实现。在本文中，将详细讨论如何使用CSS选择器来获取一个元素的前三个子元素，并对其进行样式设置。

使用 :nth-of-type 伪类选择器

在CSS中，使用 :nth-of-type 伪类选择器可以方便地选择某种类型的元素中的某个元素。要选择一个元素的前三个子元素，可以使用:nth-of-type(n)来选择第n个子元素。

下面是一个示例HTML结构，我们将选择其中一个元素的前三个子元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 取前3个子元素</title>
<style>
    .container > div:nth-of-type(-n+3) {
        background-color: lightblue;
    }
</style>
</head>
<body>
    <div class="container">
        <div>子元素1</div>
        <div>子元素2</div>
        <div>子元素3</div>
        <div>子元素4</div>
        <div>子元素5</div>
        <div>子元素6</div>
    </div>
</body>
</html>

在上面的代码中，我们通过 .container > div:nth-of-type(-n+3) 选择器选择了 container 元素下的前三个 div 元素，并为它们设置了 background-color: lightblue; 样式。

运行以上代码，可以看到效果是 container 元素中的前三个子元素背景颜色变为浅蓝色。

使用 :not 选择器

除了使用 :nth-of-type 伪类选择器外，还可以使用 :not 选择器来排除某些元素，从而选择某个元素的前三个子元素。

下面是一个示例HTML结构，我们将排除其中一个元素，选择另一个元素的前三个子元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 取前3个子元素</title>
<style>
    .container > div:not(:last-of-type) {
        color: red;
    }
</style>
</head>
<body>
    <div class="container">
        <div>子元素1</div>
        <div>子元素2</div>
        <div>子元素3</div>
        <div>子元素4</div>
        <div>子元素5</div>
        <div>子元素6</div>
    </div>
</body>
</html>

在上面的代码中，我们通过 .container > div:not(:last-of-type) 选择器排除了 container 元素下的最后一个 div 元素，然后为其余的前三个 div 元素设置了 color: red; 样式。

运行以上代码，可以看到效果是 container 元素中排除了最后一个子元素，而且前三个子元素文字颜色变为红色。