苏飞论坛

标题: CSS - :nth-child()选择元素问题 [打印本页]

---

作者: xyc    时间: 2021-6-18 09:51
标题: CSS - :nth-child()选择元素问题
  今天写页面遇到了给前5个元素设置样式的问题，于是就整理了一下css中可能会用到的获取元素的方法，下面就是获取元素的几种形式。   
           

[HTML] 纯文本查看 复制代码

                1.选择第n个，n位数字

                :nth-child(n)

                

                2.选择列表中的偶数标签

                :nth-child(2n)

                

                3.选择列表中的奇数标签

                :nth-child(2n-1)

                

                4.选择前几个元素

                /*【负方向范围】选择第1个到第5个 */

                :nth-child(-n+5){}

                

                5.从第几个开始选择

                /*【正方向范围】选择从第5个开始的，直到最后  */

                :nth-child(n+5){}

                

                6.两者结合使用，可以限制选择某一个范围

                /*【限制范围】选择第5个到第10个，取两者的交集*/

                :nth-child(-n+10):nth-child(n+5){}

                

                7.选择列表中的倒数第n个标签 n为数字

                :nth-last-child(n) 

例子： 1.ul中需要设置前4个li的样式
           

[CSS] 纯文本查看 复制代码

ul li:nth-child(-n+3){

        margin-left:0;

}

          2.ul中设置li的3的倍数样式
         

[CSS] 纯文本查看 复制代码

ul li:nth-child(3n){

        margin-left:0;

}

8.选的第一个和最后一个

[HTML] 纯文本查看 复制代码

first-child表示选择列表中的第一个标签

例： li:first-child{background:#fff}



last-child表示选择列表中的最后一个标签

例： li:last-child{background:#fff}

以上就是整理的获取元素的方法，希望可以帮助到大家。

---

作者: 站长苏飞    时间: 2021-6-18 10:34
有帮助

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4