結構偽類選擇器

2021-09-25 13:55:59 字數 2675 閱讀 3905

1.結構偽類選擇器

e:empty

選中e元素中內容為空的e元素,最終只會選擇到e元素,不會選擇到其他元素

:root

選擇到根元素,在html中根元素就是html元素,所以 :root ==== html

*/ul li

ul div

ul li:empty

:root

不限定元素型別---父元素中的所有子元素都會參與計算

d e:nth-child(規律)

找到d元素中符合規律的e元素,但是如果d元素中有非e元素的其他元素,也會算在規律中,但是執行的時候只會給符合規律e元素執行樣式,符合規律的其他元素是不會執行樣式的

d e:nth-last-child(規律)

和:nth-child()的計算方式一樣,但是計算順序相反,nth-child是從上往下計算,nth-last-child是從下往上計算

限定元素型別---父元素中的匹配的子元素才會參與計算

d e:nth-of-type(規律)

找到d元素中符合規律的e元素,但是如果d元素中有非e元素的其他元素,會排除在外,不參與計算,執行的時候只會給符合規律e元素執行樣式

d e:nth-last-of-type(規律)

和:nth-of-type()的計算方式一樣,但是計算順序相反,nth-of-type是從上往下計算,nth-last-of-type是從下往上計算

規律: n n是個變數,從0開始,一次向後遞增,遞增到元素的個數字置

數字 對應數字的元素會執行樣式

表示式 列如 2n 2n+1 3n-2

odd 奇數個

even 偶數個

/*#box li:nth-child(n)*/

/*#box li:nth-child(2)*/

/*#box li:nth-child(2n)*/

/*#box li:nth-child(2n-1)*/

/*#box li:nth-child(3n+3)*/

/*#box li:nth-child(odd)*/

/*#box li:nth-child(even)*/

/*#box li:nth-last-child(odd)*/

/*#box li:nth-last-child(even)*/

/*#box li:nth-of-type(n)*/

/*#box li:nth-of-type(6)*/

/*#box li:nth-of-type(2n+1)*/

/*#box li:nth-of-type(odd)*/

/*#box li:nth-of-type(even)*/

/*#box li:nth-last-of-type(even)*/

#box li:nth-last-of-type(3)

不限定元素型別---父元素中的所有子元素都會參與計算

d e:nth-child(規律)

找到d元素中符合規律的e元素,但是如果d元素中有非e元素的其他元素,也會算在規律中,但是執行的時候只會給符合規律e元素執行樣式,符合規律的其他元素是不會執行樣式的

d e:nth-last-child(規律)

和:nth-child()的計算方式一樣,但是計算順序相反,nth-child是從上往下計算,nth-last-child是從下往上計算

限定元素型別---父元素中的匹配的子元素才會參與計算

d e:nth-of-type(規律)

找到d元素中符合規律的e元素,但是如果d元素中有非e元素的其他元素,會排除在外,不參與計算,執行的時候只會給符合規律e元素執行樣式

d e:nth-last-of-type(規律)

和:nth-of-type()的計算方式一樣,但是計算順序相反,nth-of-type是從上往下計算,nth-last-of-type是從下往上計算

規律: n n是個變數,從0開始,一次向後遞增,遞增到元素的個數字置

數字 對應數字的元素會執行樣式

表示式 列如 2n 2n+1 3n-2

odd 奇數個

even 偶數個

e f:only-child

選擇父元素e內只包含乙個子元素,且匹配為f元素 限定子元素的數量

e f:only-of-tyle

選擇父元素e中只包含乙個同型別的子元素,且匹配為f元素 不限定子元素的數量,限定匹配元素的數量

不限定元素型別

e f:first-child

選中父元素e中的第乙個子元素f,如果第乙個子元素是f,就執行樣式,如果不是則不執行

e f:last-child

選中父元素e中的最後乙個子元素f,如果最後乙個子元素是f,就執行樣式,如果不是則不執行

限定元素型別

e f:first-of-type

選中父元素e中具有指定型別的第乙個子元素f

e f:last-of-type

選中父元素e中具有指定型別的最後乙個子元素f

*//*ul li:only-child*/

/*ul li:only-of-type*/

/*#box li:first-child

#box li:last-child*/

#box li:first-of-type

#box li:last-of-type

結構偽類選擇器

a first child 用來選取結構中的第乙個元素,格式 結構名稱 匹配物件 first child b last child 用來選取結構中的最後乙個元素,格式 結構名稱 匹配物件 first child c nth child 編號 用來選取結構中正數第n個元素,格式 結構名稱 匹配物件 n...

結構偽類選擇器

1.匹配父元素下面的第乙個子元素 匹配規則 父級選擇器 first child 需注意在選擇器後面有乙個空格 2.匹配父元素下面的最後乙個子元素 匹配規則 父級選擇器 last child 同樣需注意在選擇器後面有乙個空格 ul last child3,匹配指定的那個子元素 父級選擇器 nth ch...

結構偽類選擇器

為選擇器新增一些特殊效果或者進行約束 1.當需要選中ul中的第乙個元素時 ul li aaa li li bbb li li ccc li ul ul li first child 2.當需要選中ul中的最後乙個元素時 ul li last child 3.按父類選擇單一元素 不建議 p text1...