前言:我也不知道说什么,就是感觉这个还是挺有用的!!
先构造一下简单的列表
<style>
*{
margin:0;
padding:0;
list-style:none;
text-decoration: none;
}
body{
padding:50px;
}
li{
display: inline-block;
border:1px solid gray;
padding:5px 10px;
color:red;
font-size: 10px;
}
</style>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
</ul>
第一个或者最后一个
li:first-child{
color:blue;
}
li:last-child{
color:blue;
}
选择第几个
li:nth-child(2){
color:blue;
}
选择前3个
li:nth-child(-n+3){
color:blue;
}
从第四个到最后
li:nth-child(n+4){
color:blue;
}
选择第二个到第五个
li:nth-child(n+2):nth-child(-n+5){
color:blue;
}
奇数偶数
li:nth-child(even){
color:blue;
}
li:nth-child(odd){
color:blue;
}
等差数列
li:nth-child(3n+1){
color:blue;
}
第三个到第七个之间的奇数行不包括3\7
li:nth-child(n+4):nth-child(-n+6):nth-child(2n+1){
color:blue;
}
第三个到第七个之间的奇数行包括3\7
li:nth-child(n+3):nth-child(-n+7):nth-child(2n+1){
color:blue;
}
选择最后两个
li:nth-last-child(-n+2){
color:blue;
}
反选(:not)
li:not(:nth-child(2n+1)){
color:blue;
}
扩展
如果列表中掺杂了其余的标签,不是纯粹的一样的标签的话就可以用nth-of-type
,用法都是一样的!!