:nth-child选择器使用代码实例
分类：实例代码
下面是一个演示:nth-child选择器用法的代码实例。
需要的朋友可以做一下参考，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
li {
font-size: 38px;
}
.box1 li:nth-child(1) {
color: #f00;
}
.box2 li:nth-child(odd) {
color: #f00;
}
.box3 li:nth-child(even) {
color: #f00;
}
.box4 li:nth-child(2n) {
color: #f00;
}
.box5 li:nth-child(2n+1) {
color: #f00;
}
</style>
</head>
<body>
<ul class="box1">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
</ul>
<ul class="box2">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
</ul>
<ul class="box3">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
</ul>
<ul class="box4">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
<li>前端教程网五</li>
</ul>
<ul class="box5">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
<li>前端教程网五</li>
<li>前端教程网六</li>
</ul>
</body>
</html>
:nth-child选择器的具体用法可以参阅nth-child() 选择器用法详解一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu