CSS - :nth-child()选择元素问题

xyc

  今天写页面遇到了给前5个元素设置样式的问题，于是就整理了一下css中可能会用到的获取元素的方法，下面就是获取元素的几种形式。   
           

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

                1.选择第n个，n位数字[/size]
[size=3]                :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){[/size]
[size=3]        margin-left:0;
}

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

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

first-child表示选择列表中的第一个标签
例： li:first-child{background:#fff}

last-child表示选择列表中的最后一个标签
例： li:last-child{background:#fff}

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

站长苏飞

有帮助