结构伪类选择器

li:nth-child(2n+1) (3n+1)1开始隔N个再开始
li:nth-child(2n) (n+5) 5之后
li:nth-child(2n) (even) 偶数
li:nth-child(odd) 奇数
li:nth-child(3n+4) 第4个开始 隔3个再来
nth-of-type同上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{
          padding: 0px;
          margin: 0px;
       }
       .container{
           border: 1px solid palegreen;
           margin: 50px auto;
           width: 300px;
           padding: 10px;
       }
       .clearfix{
           overflow: hidden;
           clear: both;
       }
       .container li{
            float: left;  
            list-style: none;
            width: 20px;
            margin-right: 5px;
            border: 1px solid tomato;
            text-align: center;
       }
       .container a{
           display: block;
           width: 20px;
           height: 20px;
           text-align: center;
           border-radius: 10px;
           background-color: thistle;
           text-decoration: none;
       }
       /* li:nth-child(2n+1) (3n+1)1开始隔N个再开始
          li:nth-child(2n) (n+5) 5之后
          li:nth-child(2n) (even) 偶数
          li:nth-child(odd) 奇数
          li:nth-child(3n+4)  第4个开始 隔3个再来
        */
       .container li:nth-child(3n+4) a{
          background-color: slateblue;
       }
    </style>
</head>
<body>
    <div class="container clearfix">
    <ul class="clearfix">
        <li><a href="http://">1</a></li>
        <li><a href="http://">2</a></li>
        <li><a href="http://">3</a></li>
        <li><a href="http://">4</a></li>
        <li><a href="http://">5</a></li>
        <li><a href="http://">6</a></li>
        <li><a href="http://">7</a></li>
        <li><a href="http://">8</a></li>
        <li><a href="http://">9</a></li>
        <li><a href="http://">10</a></li>
    </ul>
    </div>
</body>
</html>

 

posted @ 2018-04-23 14:06  且听风吟V  阅读(156)  评论(0)  编辑  收藏  举报