CSS3 nth child n 使用注意

2021-10-21 20:54:52 字數 1016 閱讀 1201

:nth-child(n)    ---->選中某個元素,該元素必須是某個父元素下的第n個子元素;

p:nth-child(n)   ---->選中p元素,且該p元素必須是某個父元素下的第n個子元素

注意:n是從1開始的

如下**,p:nth-child(1),只會選中第二個div中第乙個子元素p;

不會選中第乙個div中的第乙個p,因為第乙個div中第一p元素不是第乙個子元素

div span中第乙個段落。

div 中第乙個段落。

div 中的最後乙個段落。

另乙個 div 中第乙個段落。

另乙個 div 中的最後乙個段落。

正方向範圍

li:nth-child(n+6)

選中從第6個開始的子元素

負方向範圍

:nth-child(-n+9)

選中從第1個到第9個子元素。使用 :nth-child(-n+9) ,就相當讓你選中第9個和其之前的所有子元素

前後限制範圍

:nth-child(n+4):nth-child(-n+8)

選中第4-8個子元素。使用 nth-child(n+4):nth-child(-n+8) 我們可以選中某一範圍內子元素,上面的例子裡是從第4個到第8個子元素

奇數、偶數字

:nth-child(odd)

:nth-child(even)

:nth-child(3n+1),

選擇1,4,7,10

範圍高階用法

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

使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) 我們將會選中的子元素是從第2位到第9位,並且只包含奇數字。

CSS關於選擇器 nth child n

之所以要單開一篇博文寫這個選擇器,是因為我在刷題的時候發現這個選擇器的定義是 匹配屬於其父元素的第 n 個子元素,不論元素的型別 1 我不太明白所謂的 不論元素的型別 是什麼意思,剛開始我以為是不論標籤元素型別,也就是說 選擇當前標籤e的父級元素的第n個子元素,不論這個元素是否是e標籤,但是我寫了乙...

使用CSS 的3種方式

css cascade style sheet 層疊樣式表憑著著 豐富的樣式 簡單易用 重複使用 縮小檔案 等優勢成為了現代網頁必不可少的一樣技術。需要注意的是,目前我們將css定義為樣式表中的一種,未來可能有其他樣式表被開發出來。直白地說,css就是一系列樣式的集合,它用於定義文件元素的外觀表現形...

CSS3 box shadow 陰影使用

css3 box shadow 內陰影與外陰影 1 box shadow具體使用方法,語法 e 換句說 物件選擇器 取值 投放方式 預設是外陰影 box shadow屬性至多有6個引數設定,他們分別取值 陰影型別 此引數是乙個可選值,如果不設值,其預設的投影方式是外陰影 如果取其唯一值 inset ...