极客教程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:
运行结果：第二个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:
运行结果：第二个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:
运行结果：第二个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:
运行结果：第二个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:
运行结果：倒数第二个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:
运行结果：倒数第二个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:
运行结果：倒数第二个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:
运行结果：倒数第二个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:
运行结果：第二个和第四个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:
运行结果：第二个和第三个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:
运行结果：第六个和第八个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:
运行结果：第六个和第七个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:
运行结果：倒数第二个和倒数第三个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:
运行结果：倒数第二个和倒数第四个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:
运行结果：倒数第三个和倒数第四个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>
Output:
运行结果：倒数第三个和倒数第五个span元素的字体大小变为14px。
9. 结语
通过本文的介绍和示例代码，读者可以学习如何使用CSS选择器来选择页面中的第二个元素，以及如何选择多个元素进行样式设置。