您的位置：首页 > Web前端 > CSS

CSS3选择器nth-child

2018-02-18 14:57 309 查看 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
nth-child(n)
An+B
*/
li:nth-child(4n+1){
background-color:darkviolet;
}
li:nth-child(4n+2){
background-color:darkgreen;
}
li:nth-child(4n+3){
background-color:firebrick;
}
li:nth-child(4n){
background-color:aqua;
}
</style>
</head>

<body>

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>

</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航