詳解CSS中 nth child的用法

2021-08-03 08:15:21 字數 931 閱讀 4654

前端的哥們想必都接觸過css中乙個神奇的玩意,可以輕鬆選取你想要的標籤並給與修改新增樣式,是不是很給力,它就是「:nth-child」。

下面我將用幾個典型的例項來給大家講解:nth-child的實際用途:

tips:還用低版本的ie瀏覽器的哥們請繞過!

.

demo01 li

:nth

-child(2

)

點此檢視例項展示

.

demo01 li

:nth

-child(n

+4)

點此檢視例項展示

.

demo01 li

:nth

-child(-n

+4)

點此檢視例項展示

.

demo01 li

:nth

-child(2n

)

點此檢視例項展示

.

demo01 li

:nth

-child(2n

-1)

點此檢視例項展示

.

demo01 li

:nth

-child(3n

+1)

點此檢視例項展示

.

demo01 li

:last

-child

點此檢視例項展示

.

demo01 li

:nth

-last

-child(3

)

ok,:nth-child的這些用法在實際中很用得著,不用單獨給需要選取的標籤加上id或class,是不是很拉轟!

ad:【優秀主題】

tob主題正式發布,夠炫酷! 完美的自適應布局,完善的站配置

詳解CSS中 nth child的用法

tips 還用低版本的ie瀏覽器的哥們請繞過!nth child 2 選取第幾個標籤,2可以是你想要的數字 demo01 li nth child 2 nth child n 4 選取大於等於4標籤,n 表示從整數,下同 點此檢視例項展示 demo01 li nth child n 4 nth ch...

詳解CSS中 nth child的用法

前端的哥們想必都接觸過css中乙個神奇的玩意,可以輕鬆選取你想要的標籤並給與修改新增樣式,是不是很給力,它就是 nth child tips 還用低版本的ie瀏覽器的哥們請繞過!demo01 li nth child 2 點此檢視例項展示 demo01 li nth child n 4 點此檢視例項...

CSS中 nth child 的使用

選擇第n個,n位數字 nth child n 選擇列表中的偶數標籤 nth child 2n nth child even 選擇列表中的奇數標籤 nth child 2n 1 nth child odd 選擇前幾個元素 負方向範圍 選擇第1個到第6個 nth child n 6 從第幾個開始選擇 正...