CSS同样类名选择第二个|极客教程

CSS同样类名选择第二个

在CSS中，当我们有多个相同类名的元素时，有时候我们需要选择其中的第二个元素进行样式设置。这在实际开发中是一个常见的需求，本文将介绍几种方法来实现这个目标。

方法一：使用:nth-of-type伪类选择第二个元素

<!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>
    .example {
        color: red;
    }
    .example:nth-of-type(2) {
        color: blue;
    }
</style>
</head>
<body>
    <p class="example">第一个元素</p>
    <p class="example">第二个元素</p>
    <p class="example">第三个元素</p>
</body>
</html>

Output:

CSS同样类名选择第二个

在上面的示例中，我们使用:nth-of-type(2)来选择第二个类名为example的元素，并设置其颜色为蓝色。

方法二：使用: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>
    .example {
        color: red;
    }
    .example:nth-child(2) {
        color: blue;
    }
</style>
</head>
<body>
    <p class="example">第一个元素</p>
    <p class="example">第二个元素</p>
    <p class="example">第三个元素</p>
</body>
</html>

Output:

CSS同样类名选择第二个

在这个示例中，我们使用:nth-child(2)来选择第二个类名为example的元素，并设置其颜色为蓝色。

方法三：使用JavaScript选择第二个元素并添加类名

<!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>
    .example {
        color: red;
    }
    .blue {
        color: blue;
    }
</style>
</head>
<body>
    <p class="example">第一个元素</p>
    <p class="example">第二个元素</p>
    <p class="example">第三个元素</p>

    <script>
        const elements = document.querySelectorAll('.example');
        elements[1].classList.add('blue');
    </script>
</body>
</html>