您的位置：首页 > 其它

nth-child选择器

2016-05-24 22:49 274 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
li{list-style: none;width: 50px;height: 50px;background: blue;margin-top:10px;}
li:nth-child(5){
background: green;
}
.box li{background: red;}
/* .box li:nth-child(2n){
background: green;
}
.box li:nth-child(2n+1){
background: pink;
}
.box li:nth-child(3n){
background: blue;
} */
/* .box li:nth-child(odd){
background: blue;
}
.box li:nth-child(even){
background: orange;
} */

.box li:nth-child(3n+2){
background: blue;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h3>以上跟下面的没关系</h3>
<ul class="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航