• 结构伪类选择器


    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>
  • 相关阅读:
    nyoj112-指数运算
    nyoj51-管闲事的小明
    nyoj29-求置转换问题
    nyoj24-素数 距离问题
    nyoj22-素数求和问题
    nyoj23-取石子(一)
    nyoj4-ASCII码排序
    nyoj169-素数
    并查集:CDOJ1593-老司机破阵 (假的并查集拆除)
    线段树: CDOJ1598-加帕里公园的friends(区间合并,单点更新)
  • 原文地址:https://www.cnblogs.com/zzzzzzzsy/p/8918788.html
Copyright © 2020-2023  润新知