HTML5+CSS——08子元素偽類、兄弟元素選擇器、否定偽類、樣式繼承、選擇器優(yōu)先級(jí)、偽類順序

一.子元素的偽類

1):first-child 可以選中第一個(gè)子元素

2):last-child 可以選中最后一個(gè)子元素

3):nth-child 可以選中任意一個(gè)子元素

該選擇器可以指定一個(gè)參數(shù),指定要選中第幾個(gè)元素

even 表示偶數(shù)位置的子元素

odd 表示奇數(shù)位置的子元素

4)

:first-of-type

:last-of-type

:nth-of-type

和:first-child這些非常相似,只不過child,是在所有子元素中排列,而type:是在當(dāng)前類型 的元素中排列。

二.兄弟元素選擇器

1)后一個(gè)兄弟元素選擇器

作用:可以選中一個(gè)元素后緊挨著的指定的兄弟元素

語法:前一個(gè) + 后一個(gè)

2)選中后邊的所有兄弟元素

語法:第一個(gè) ~ 后邊所有

三.否定偽類

1)否定偽類

作用:可以從已選中的元素中剔除某些元素

語法: :not(選擇器)

否定偽類

四.樣式的繼承

像兒子可以繼承父親的遺產(chǎn)一樣,在CSS中,祖先元素上的樣式,也會(huì)被他的后代元素所繼承。

利用繼承,可以將一些基本的樣式和設(shè)置給祖先元素,這樣所有的后代元素會(huì)將自動(dòng)繼承這些樣式。

但是,并不是所有的樣式都會(huì)被子元素所繼承,比如:背景相關(guān)樣式都不會(huì)被繼承

樣式繼承

五.選擇器的優(yōu)先級(jí)

當(dāng)使用不同的選擇器,選中同一個(gè)元素時(shí)并且設(shè)置相同的樣式時(shí),這時(shí)樣式之間產(chǎn)生了沖突,最終到底采用哪個(gè)選擇器定義的樣式,由選擇器的優(yōu)先級(jí)(權(quán)重)決定。

優(yōu)先級(jí)高的優(yōu)先顯示

優(yōu)先級(jí)規(guī)則:

內(nèi)聯(lián)樣式,優(yōu)先級(jí)1000

id選擇器,優(yōu)先級(jí) 100

類和偽類,優(yōu)先級(jí) 10

元素選擇器,優(yōu)先級(jí) 1

通配*選擇器,優(yōu)先級(jí)0

繼承的樣式,沒有優(yōu)先級(jí)?

當(dāng)選擇器中包含多種選擇器時(shí),需要將多種選擇器的優(yōu)先級(jí)相加然后在比較,但是注意,選擇器優(yōu)先級(jí)計(jì)算不會(huì)超過他的最大的數(shù)量級(jí)。

并集選擇器的優(yōu)先級(jí)是單獨(dú)計(jì)算

div,p,#p1,.hello{ }

可以在樣式的最后,添加一個(gè) !important,則此時(shí)該樣式將會(huì)獲得一個(gè)最高的優(yōu)先級(jí),將會(huì)優(yōu)先于所有的樣式顯示甚至超過內(nèi)聯(lián)樣式,但是在開發(fā)中很少使用。

六.a的偽類順序

:link

:visited

:hover

:active

這四個(gè)選擇器的優(yōu)先級(jí)是一樣的


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容