:nth-child(n)的作用有哪些
发布时间：01/01 来源：未知 浏览：
关键词：
“:nth-child(n)”是css中的一个选中器，作用是：匹配属于其父元素的第N个子元素，不管元素的类型；其中，参数“n”可以是数字、关键词或公式，例“:nth-child(3)”、“:nth-child(even)”。
本文操纵环境：宏基S40-51、CSS3&&HTML5&&HBuilderX.3.0.5版、Windows10 家庭中文版
（学习视频分享：css视频教程）
在 CSS 中，选中器是一种模式，用于选中需要增加样式的元素。nth-child(n)是css3中的一种选中器。
:nth-child(n)选中器用于匹配父元素索引为n的子元素，即拔取属于其父元素的第N个子元素，不管元素的类型。
说明：n可以是数字、关键词（Odd 和 even）或公式。
示例1：当n为数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-child(n)选中器</title>
<style>
/*
:nth-child(n)选中器用于匹配父元素索引为n的子元素，即拔取属于其父元素的第N个子元素，不管元素的类型。
n可以是数字、关键词（Odd 和 even）或公式。
*/
/* p:nth-child(2) {
background: pink;
} */
</style>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
</body>
</html>结果图：
示例2：当n为关键词（Odd 和 even）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-child(n)选中器</title>
<style>
p:nth-child(odd) {
background: pink;
}
p:nth-child(even) {
background: paleturquoise;
}
</style>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
<p>第十个段落。</p>
</body>
</html>结果图：
示例3：当n为公式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-child(n)选中器</title>
<style>
/*
使用公式 (an + b)。描写：表示周期的长度，n 是计数器（从 0 开端），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背风光：
*/
p:nth-child(3n+0)
{
background:pink;
}
</style>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
<p>第十个段落。</p>
</body>
</html>结果图：
使用公式 (an + b)。描写：表示周期的长度，n 是计数器（从 0 开端），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背风光：
