nth-child选择(小研究)

前言:我也不知道说什么,就是感觉这个还是挺有用的!!


先构造一下简单的列表
<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>列表1li>
    <li>列表2li>
    <li>列表3li>
    <li>列表4li>
    <li>列表5li>
    <li>列表6li>
    <li>列表7li>
    <li>列表8li>
ul>

基础


第一个或者最后一个
li:first-child{
    color:blue;
 }
 li:last-child{
     color:blue;
 }

nth-child选择(小研究)_第1张图片


选择第几个
li:nth-child(2){
   color:blue;
}

第n个


选择前3个
li:nth-child(-n+3){
  color:blue;
}

nth-child选择(小研究)_第2张图片


从第四个到最后
li:nth-child(n+4){
  color:blue;
}

第四个到最后


选择第二个到第五个
li:nth-child(n+2):nth-child(-n+5){
  color:blue;
}

第二个到第五个


奇数偶数
li:nth-child(even){
  color:blue;
}

nth-child选择(小研究)_第3张图片

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;
}

nth-child选择(小研究)_第4张图片


第三个到第七个之间的奇数行包括3\7
li:nth-child(n+3):nth-child(-n+7):nth-child(2n+1){
   color:blue;
}

nth-child选择(小研究)_第5张图片


选择最后两个
li:nth-last-child(-n+2){
  color:blue;
}

nth-child选择(小研究)_第6张图片


反选(:not)
li:not(:nth-child(2n+1)){
  color:blue;
}

nth-child选择(小研究)_第7张图片


扩展

如果列表中掺杂了其余的标签,不是纯粹的一样的标签的话就可以用nth-of-type,用法都是一样的!!

你可能感兴趣的:(大前端-html/css)