想要使用CSS获取特定位置的子元素，可以使用CSS :nth-child()选择器。:nth-child()选择器仅用于选择属于其父级的第n个子级（无论类型如何）的元素。下面本篇文章就来给大家介绍一下CSS :nth-child()选择器，希望对大家有所帮助。
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
语法：
: nth-child(arg) {
// CSS样式
}参数：
其中arg是表示匹配元素的模式的参数。它可以是一个数字（number）、一个关键字（odd 或 even）或一个线性方程。
● number：表示其位置由参数指定的元素。
● odd：表示位置为奇数的元素，即1,3,5等。
● even：代表位置均匀的元素，即2,4,6等。
● 线性方程：表示每个正整数n的位置与模式A * n + B匹配的元素。n的值从零开始。
示例1：选择作为参数传递的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p:nth-child(2) {
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
</body>
</html>
效果图：
示例2：选择偶数子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p:nth-child(even) {
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
</body>
</html>效果图：
示例3：选择奇数子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p:nth-child(odd) {
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
</body>
</html>效果图：
示例4：将线性等式作为参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p:nth-child(3n + 2) {
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
<p>Hello World！</p>
</body>
</html>效果图：
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
