非零基础自学前端最后一遍一 HTML+CSS 13 Emmet和结构伪类 13.2 结构伪类-nth-child-last

一时失言乱红尘 2024-03-23 15:09 18阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  13 Emmet和结构伪类
         *   *  13.2 结构伪类-nth-child-last
             *   *  13.2.1 结构伪类 - :nth-child
                 *  13.2.2 结构伪类 - :nth-last-child( )

![在这里插入图片描述][643b9404e3424ff79ec994768f7e61de.png_pic_center]

#### 一 HTML+CSS ####

#### 13 Emmet和结构伪类 ####

##### 13.2 结构伪类-nth-child-last #####

###### 13.2.1 结构伪类 - :nth-child ######

*  :nth-child(1)
    
     *  是父元素中的第1个子元素
 *  :nth-child(2n)
    
     *  n代表任意正整数和0
     *  是父元素中的第偶数个子元素（第2、4、6、8…个）
     *  跟:nth-child(even)同义
 *  :nth-child(2n + 1)
    
     *  n代表任意正整数和0
     *  是父元素中的第奇数个子元素（第1、3、5、7…个）
     *  跟:nth-child(odd)同义
 *  nth-child(-n + 2)
    
     *  代表前2个子元素

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        ul li:nth-child(3) {
          
          color: red;
        }
    
        /* 0, 1, 2, 3, 4, 5...... */
        ul li:nth-child(2n) {
          
          color: green;
        }
    
        ul li:nth-child(2n + 1) {
          
          color: blue;
        }
    
    
        div>div:nth-child(4n + 1) {
          
          color: orange;
        }
    
        div>div:nth-child(4n + 2) {
          
          color: purple;
        }
    
        div>div:nth-child(4n + 3) {
          
          color: red;
        }
    
        div>div:nth-child(4n) {
          
          color: blue;
        }
    
        /* 前几个 */
        div>div:nth-child(-n + 5) {
          
          font-size: 20px;
        }
      </style>
    </head>
    
    <body>
    
      <ul>
        <li>列表元素1</li>
        <li>列表元素2</li>
        <li>列表元素3</li>
        <li>列表元素4</li>
        <li>列表元素5</li>
        <li>列表元素6</li>
      </ul>
    
      <div>
        <div>列表元素1</div>
        <div>列表元素2</div>
        <div>列表元素3</div>
        <div>列表元素4</div>
        <div>列表元素5</div>
        <div>列表元素6</div>
        <div>列表元素7</div>
        <div>列表元素8</div>
        <div>列表元素9</div>
        <div>列表元素10</div>
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][65cd5e3b1dc84ce7932844577880a9b4.png_pic_center]

###### 13.2.2 结构伪类 - :nth-last-child( ) ######

*  :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
    
     *  :nth-last-child(1)，代表倒数第一个子元素
     *  :nth-last-child(-n + 2)，代表最后2个子元素

渲染效果

![在这里插入图片描述][e8b12a905bc640b3a12a50353f44a697.png_pic_center]

[643b9404e3424ff79ec994768f7e61de.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/1887a36c8e7440c0b56ee106370e9724.png
[65cd5e3b1dc84ce7932844577880a9b4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/12d647dfda4b4513ab90d87a5d0a71f4.png
[e8b12a905bc640b3a12a50353f44a697.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/8d7aa0537ecf4abda771c00d7c812f21.png