1. 程式人生 > >css偽類選擇器 nth-child( ) 使用

css偽類選擇器 nth-child( ) 使用

製作中遇到需求:

點選“更多”按鈕展開標籤

思路:使用css偽類nth-child()選擇之後元素隱藏。

以下蒐集關於nth-child用法:

1、正方向範圍

li:nth-child(n+5)      選中第5個及之後的元素

2、負方向範圍

li:nth-child(-n+8)     選中第8個及之前的元素

3、前後限制範圍

li:nth-child(n+5):nth-child(-n+8)      選中第5個到第8個元素(包含5和8本身)

4、奇數、偶數

li:nth-child(odd)

li:nth-child(even)

5、隔選擇子元素

li:nth-child(3n+1)   選擇1,4,7,10......

6、範圍高階用法

nth-child(n+2):nth-child(odd):nth-child(-n+9)

選中的子元素是從第2位到第9位,並且只包含奇數位。