nth-child() 选择器用法详解
分类：实例代码
关于此选择器的基本用法可以参阅CSS E:nth-child(n)一章节。
先看它的语法结构:
E:nth-child(n){ Rules }
下面介绍一下此选择器的作用:
（1）.选择器首先匹配父元素的第n个元素。
（2）.然后再根据E选择器进行筛选。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#box li {
width: 350px;
height: 25px;
line-height: 25px;
font-size: 12px;
}
li:nth-child(3) {
color:green;
}
</style>
</head>
<body>
<ul id="box">
<li>前端教程网欢迎您，只有努力才会有美好的未来</li>
<li>每一天都是新的，必须要好好把握。</li>
<li>没有人一开始就是高手，必须要努力奋斗。</li>
<li>未来都是虚无缥缈的，只有当前是现实。</li>
<li>分享和互助式进步的最大原动力</li>
<li>本站的url地址是www.pipipi.net。</li>
</ul>
</body>
</html>
上面的代码可以将ul元素下第3个子元素li的字体颜色设置为绿色。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#box li {
width: 350px;
height: 25px;
line-height: 25px;
font-size: 12px;
}
.antzone:nth-child(2) {
color:green;
}
.antzone:nth-child(3) {
color:green;
}
</style>
</head>
<body>
<ul id="box">
<li>前端教程网欢迎您，只有努力才会有美好的未来</li>
<li class="antzone">每一天都是新的，必须要好好把握。</li>
<li>没有人一开始就是高手，必须要努力奋斗。</li>
<li class="antzone">未来都是虚无缥缈的，只有当前是现实。</li>
<li>分享和互助式进步的最大原动力</li>
<li class="antzone">本站的url地址是www.pipipi.net。</li>
</ul>
</body>
</html>
上面的代码可以将ul元素下第二个li元素的字体颜色设置为绿色，但是这个li元素的class属性值必须是antzone。
由于第三个li元素的class属性值非antzone，所以字体颜色不是绿色。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
p:nth-child(2) {
color:green;
}
</style>
</head>
<body>
<h1>前端教程网</h1>
<p>前端教程网一</p>
<p>前端教程网二</p>
<p>前端教程网三</p>
<p>前端教程网四</p>
</body>
</html>
上面的代码可以将body子元素的第二个元素字体颜色设置为绿色（如果是p元素的话）。
奇偶匹配:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#box li {
width: 350px;
height: 25px;
line-height: 25px;
font-size: 12px;
}
li:nth-child(odd) {
color:green;
}
</style>
</head>
<body>
<ul id="box">
<li>前端教程网欢迎您，只有努力才会有美好的未来</li>
<li>每一天都是新的，必须要好好把握。</li>
<li>没有人一开始就是高手，必须要努力奋斗。</li>
<li>未来都是虚无缥缈的，只有当前是现实。</li>
<li>分享和互助式进步的最大原动力</li>
<li>本站的url地址是www.pipipi.net。</li>
</ul>
</body>
</html>
上面的代码可以将li元素奇数行字体颜色设置为绿色。
当然:nth-child()选择器的参数可以是even，即:nth-child(even)。
倍数写法:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#box li {
width: 350px;
height: 25px;
line-height: 25px;
font-size: 12px;
}
li:nth-child(3n) {
color:green;
}
</style>
</head>
<body>
<ul id="box">
<li>前端教程网欢迎您，只有努力才会有美好的未来</li>
<li>每一天都是新的，必须要好好把握。</li>
<li>没有人一开始就是高手，必须要努力奋斗。</li>
<li>未来都是虚无缥缈的，只有当前是现实。</li>
<li>分享和互助式进步的最大原动力</li>
<li>本站的url地址是www.pipipi.net。</li>
</ul>
</body>
</html>
上面的代码可以将第三个和第六个li元素字体颜色设置为绿色。
这个n可以是1,2,3....。
当然括号中的这个规则可以延伸为:nth-child(2n+1),:nth-child(2n-3),:nth-child(4n+3)等等，可以无限扩展。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu