您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)css核心基礎(chǔ)知識(shí)點(diǎn)有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
層疊樣式表
層疊是什么意思?為什么這個(gè)詞如此重要,以至于要出現(xiàn)在它的名稱(chēng)里。
層疊可以簡(jiǎn)單地理解為沖突的解決方案。
什么是沖突?
就是同個(gè)元素在使用不同的選擇器選擇中后添加相同的樣式。
優(yōu)先級(jí)規(guī)則可以表述為
行內(nèi)樣式>ID樣式>類(lèi)別樣式>標(biāo)記樣式
在復(fù)雜的頁(yè)面中,某一個(gè)元素有可能會(huì)從很多地方獲取樣式,例如一個(gè)網(wǎng)站的某一
級(jí)標(biāo)題整體設(shè)置為使用綠色,而對(duì)某個(gè)特殊欄目需要使用藍(lán)色,這樣在欄目中就需
要覆蓋通用的樣式設(shè)置。在很簡(jiǎn)單的頁(yè)面中,這樣的特殊需求實(shí)現(xiàn)起來(lái)不會(huì)很難,
但是如果網(wǎng)站的結(jié)構(gòu)很復(fù)雜,就完全有可能代碼變得非?;靵y,可能出現(xiàn)無(wú)法找到
某個(gè)元素的樣式來(lái)自于哪條規(guī)則的情況。因此,必須要充分理解css中“層疊”的原理。
計(jì)算沖突樣式的優(yōu)先級(jí)是一個(gè)比較復(fù)雜的過(guò)程,并不僅僅是上面這個(gè)簡(jiǎn)單的優(yōu)先級(jí)規(guī)則
可以完全描述的。但是讀者可以把一個(gè)大的原則,就是“越特殊的樣式,優(yōu)先級(jí)越高”。
而這個(gè)怎么樣才是特殊且越特殊怎么定位,請(qǐng)接著看以下的內(nèi)容。
特殊性:
每個(gè)選擇器都有特殊性,而如果一個(gè)元素有兩個(gè)或多個(gè)沖突的屬性聲明,特殊性高的勝出。
選擇器的特殊性由選擇器本身的組件確定。特殊性值表述為4個(gè)部分,如:0,0,0,0.
一個(gè)選擇器的具體特殊性如下確定:
對(duì)于選擇器中給定的各個(gè)ID屬性值,則在第二個(gè)部分加一:0,1,0,0。
對(duì)于選擇器中給定的各個(gè)類(lèi)屬性值、屬性選擇或偽類(lèi),則在第三個(gè)部分加一:0,0,1,0。
對(duì)于選擇器中給定的各個(gè)元素和偽元素,則在第四個(gè)部分加一:0,0,0,1。
結(jié)合符和通配選擇器對(duì)特殊性沒(méi)有任何貢獻(xiàn)。
但通配選擇器特殊性為零 : 即0,0,0,0。
結(jié)合符連零都沒(méi)有。
例子:
h2{color:red;} 為0,0,0,1
p em{color:purple} 為0,0,0,2
.grape{color:purple} 為0,0,1,0
p.b e.a{color:red; } 0,0,2,2
#aa{color:red;} 0,1,0,0
div#aa *[href]{color:red;} 0,1,1,1
而第一個(gè)0是為行內(nèi)樣式準(zhǔn)備的,因?yàn)樵角懊?,代表?yōu)先級(jí)越高,假如非零數(shù)字位置一樣,那么先比較前面的數(shù)字的大小,
然后再往下比較,直到數(shù)字不相對(duì),取數(shù)字大那個(gè)的優(yōu)先級(jí)高。
所以才有上面的那個(gè)大致優(yōu)先級(jí)規(guī)則:
行內(nèi)樣式>ID樣式>類(lèi)別樣式>標(biāo)記樣式
它們剛剛好可以作為每個(gè)部分的代表,也是四個(gè),對(duì)號(hào)入座。
重要聲明 !important ,就是把你所需要的聲明標(biāo)出來(lái),它的優(yōu)先級(jí)最高,不過(guò)它要放在聲明的值的最后。
繼承:
繼承的特殊性連零都沒(méi)有,就是沒(méi)有特殊性;
這個(gè)0特殊性有零與無(wú)特殊性有很大的區(qū)別,就是0特殊性的選擇器可以為后代加樣式,
而繼承雖然也有給后代加樣式,但有限制的,只有有繼承能力的才能加到后代元素中,如color等,而margin、padding和border這些屬性都不會(huì)加到后代里。
相同權(quán)重的,按順序比較,順序越下他的優(yōu)先級(jí)最高。
較高特殊性強(qiáng)于較低特殊性
所以偽類(lèi)聲明順序:link-visited-hover-active
LVHA(簡(jiǎn)寫(xiě))
當(dāng):visited在他們之后時(shí),由于權(quán)重一樣,所以會(huì)看他們的順序,而:visited在他們之后會(huì)勝出。
當(dāng)不是寫(xiě)統(tǒng)一屬性就不會(huì)出現(xiàn)這種問(wèn)題。所以寫(xiě)同一種屬性時(shí)要注意 ?。。。?/p>
感謝各位的閱讀!關(guān)于“css核心基礎(chǔ)知識(shí)點(diǎn)有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。