CSS取第二个元素|极客教程

CSS取第二个元素

在CSS中，我们经常需要选择页面中的某个元素或者一组元素来进行样式设置。有时候我们需要选择第二个元素，这时候就需要使用一些特殊的选择器来实现。本文将详细介绍如何使用CSS来选择第二个元素，并提供多个示例代码来帮助读者更好地理解。

1. 使用:nth-child选择器

:nth-child选择器可以选择指定父元素下的第n个子元素，其中n可以是一个具体的数字、odd（奇数）或even（偶数）。通过结合:nth-child选择器和:nth-of-type选择器，我们可以轻松地选择第二个元素。

示例代码1：选择第二个div元素并设置背景色为红色

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(2) {
    background-color: red;
}
</style>
</head>
<body>

<div>第一个div元素</div>
<div>第二个div元素</div>
<div>第三个div元素</div>

</body>
</html>

Output:

CSS取第二个元素

运行结果：第二个div元素的背景色变为红色。

示例代码2：选择第二个p元素并设置字体颜色为蓝色

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(2) {
    color: blue;
}
</style>
</head>
<body>

<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>

</body>
</html>

Output:

CSS取第二个元素

运行结果：第二个p元素的字体颜色变为蓝色。

2. 使用:nth-of-type选择器

:nth-of-type选择器可以选择指定类型的元素中的第n个元素。通过结合:nth-of-type选择器和:nth-child选择器，我们可以更灵活地选择第二个元素。

示例代码3：选择第二个span元素并设置字体大小为20px

<!DOCTYPE html>
<html>
<head>
<style>
span:nth-child(2) {
    font-size: 20px;
}
</style>
</head>
<body>

<span>第一个span元素</span>
<span>第二个span元素</span>
<span>第三个span元素</span>

</body>
</html>

Output:

CSS取第二个元素

运行结果：第二个span元素的字体大小变为20px。

示例代码4：选择第二个h3元素并设置文本为粗体

<!DOCTYPE html>
<html>
<head>
<style>
h3:nth-of-type(2) {
    font-weight: bold;
}
</style>
</head>
<body>

<h3>第一个h3元素</h3>
<h3>第二个h3元素</h3>
<h3>第三个h3元素</h3>

</body>
</html>

Output:

CSS取第二个元素

运行结果：第二个h3元素的文本变为粗体。

3. 使用:nth-last-child选择器

:nth-last-child选择器可以选择指定父元素下的倒数第n个子元素。通过结合:nth-last-child选择器和:nth-child选择器，我们可以选择倒数第二个元素。

示例代码5：选择倒数第二个li元素并设置背景色为绿色

<!DOCTYPE html>
<html>
<head>
<style>
li:nth-last-child(2) {
    background-color: green;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

CSS取第二个元素

运行结果：倒数第二个li元素的背景色变为绿色。

示例代码6：选择倒数第二个a元素并设置字体颜色为紫色

<!DOCTYPE html>
<html>
<head>
<style>
a:nth-last-child(2) {
    color: purple;
}
</style>
</head>
<body>

<a href="#">第一个a元素</a>
<a href="#">第二个a元素</a>
<a href="#">第三个a元素</a>

</body>
</html>

Output:

CSS取第二个元素

运行结果：倒数第二个a元素的字体颜色变为紫色。

4. 使用:nth-last-of-type选择器

:nth-last-of-type选择器可以选择指定类型的元素中的倒数第n个元素。通过结合:nth-last-of-type选择器和:nth-of-type选择器，我们可以选择倒数第二个元素。

示例代码7：选择倒数第二个h4元素并设置文本为斜体

<!DOCTYPE html>
<html>
<head>
<style>
h4:nth-last-of-type(2) {
    font-style: italic;
}
</style>
</head>
<body>

<h4>第一个h4元素</h4>
<h4>第二个h4元素</h4>
<h4>第三个h4元素</h4>

</body>
</html>

Output:

CSS取第二个元素

运行结果：倒数第二个h4元素的文本变为斜体。

示例代码8：选择倒数第二个span元素并设置字体大小为16px

<!DOCTYPE html>
<html>
<head>
<style>
span:nth-last-of-type(2) {
    font-size: 16px;
}
</style>
</head>
<body>

<span>第一个span元素</span>
<span>第二个span元素</span>
<span>第三个span元素</span>

</body>
</html>

Output:

CSS取第二个元素

运行结果：倒数第二个span元素的字体大小变为16px。

5. 使用:nth-child(n)选择器选择多个元素

除了选择单个元素外，我们还可以使用:nth-child(n)选择器选择多个元素，例如选择第二个和第四个元素。

示例代码9：选择第二个和第四个div元素并设置背景色为黄色

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(2), div:nth-child(4) {
    background-color: yellow;
}
</style>
</head>
<body>

<div>第一个div元素</div>
<div>第二个div元素</div>
<div>第三个div元素</div>
<div>第四个div元素</div>
<div>第五个div元素</div>

</body>
</html>

Output:

CSS取第二个元素

运行结果：第二个和第四个div元素的背景色变为黄色。

示例代码10：选择第二个和第三个p元素并设置字体颜色为橙色

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2), p:nth-child(3) {
    color: orange;
}
</style>
</head>
<body>

<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>

</body>
</html>

Output:

CSS取第二个元素

运行结果：第二个和第三个p元素的字体颜色变为橙色。

6. 使用:nth-of-type(n)选择器选择多个元素

类似于:nth-child(n)选择器，我们也可以使用:nth-of-type(n)选择器选择多个元素，例如选择第六个和第八个元素。

示例代码11：选择第六个和第八个h2元素并设置文本为下划线

<!DOCTYPE html>
<html>
<head>
<style>
h2:nth-of-type(6), h2:nth-of-type(8) {
    text-decoration: underline;
}
</style>
</head>
<body>

<h2>第一个h2元素</h2>
<h2>第二个h2元素</h2>
<h2>第三个h2元素</h2>
<h2>第四个h2元素</h2>
<h2>第五个h2元素</h2>
<h2>第六个h2元素</h2>
<h2>第七个h2元素</h2>
<h2>第八个h2元素</h2>

</body>
</html>

Output:

CSS取第二个元素

运行结果：第六个和第八个h2元素的文本变为下划线。

示例代码12：选择第六个和第七个span元素并设置字体大小为18px

<!DOCTYPE html>
<html>
<head>
<style>
span:nth-of-type(6), span:nth-of-type(7) {
    font-size: 18px;
}
</style>
</head>
<body>

<span>第一个span元素</span>
<span>第二个span元素</span>
<span>第三个span元素</span>
<span>第四个span元素</span>
<span>第五个span元素</span>
<span>第六个span元素</span>
<span>第七个span元素</span>
<span>第八个span元素</span>

</body>
</html>

Output:

CSS取第二个元素

运行结果：第六个和第七个span元素的字体大小变为18px。

7. 使用:nth-last-child(n)选择器选择多个元素

除了选择单个元素外，我们还可以使用:nth-last-child(n)选择器选择多个元素，例如选择倒数第二个和倒数第三个元素。

示例代码13：选择倒数第二个和倒数第三个li元素并设置背景色为灰色

<!DOCTYPE html>
<html>
<head>
<style>
li:nth-last-child(2), li:nth-last-child(3) {
    background-color: gray;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

CSS取第二个元素

运行结果：倒数第二个和倒数第三个li元素的背景色变为灰色。

示例代码14：选择倒数第二个和倒数第四个a元素并设置字体颜色为粉色

<!DOCTYPE html>
<html>
<head>
<style>
a:nth-last-child(2), a:nth-last-child(4) {
    color: pink;
}
</style>
</head>
<body>

<a href="#">第一个a元素</a>
<a href="#">第二个a元素</a>
<a href="#">第三个a元素</a>
<a href="#">第四个a元素</a>

</body>
</html>

Output:

CSS取第二个元素

运行结果：倒数第二个和倒数第四个a元素的字体颜色变为粉色。

8. 使用:nth-last-of-type(n)选择器选择多个元素

类似于:nth-last-child(n)选择器，我们也可以使用:nth-last-of-type(n)选择器选择多个元素，例如选择倒数第三个和倒数第四个元素。

示例代码15：选择倒数第三个和倒数第四个h5元素并设置文本为斜体

<!DOCTYPE html>
<html>
<head>
<style>
h5:nth-last-of-type(3), h5:nth-last-of-type(4) {
    font-style: italic;
}
</style>
</head>
<body>

<h5>第一个h5元素</h5>
<h5>第二个h5元素</h5>
<h5>第三个h5元素</h5>
<h5>第四个h5元素</h5>
<h5>第五个h5元素</h5>

</body>
</html>

Output:

CSS取第二个元素

运行结果：倒数第三个和倒数第四个h5元素的文本变为斜体。

示例代码16：选择倒数第三个和倒数第五个span元素并设置字体大小为14px

<!DOCTYPE html>
<html>
<head>
<style>
span:nth-last-of-type(3), span:nth-last-of-type(5) {
    font-size: 14px;
}
</style>
</head>
<body>

<span>第一个span元素</span>
<span>第二个span元素</span>
<span>第三个span元素</span>
<span>第四个span元素</span>
<span>第五个span元素</span>

</body>
</html>