摘要:在層疊中每個樣式規(guī)則都有一個權(quán)重值,當(dāng)其中幾條規(guī)則同時生效時,權(quán)重最大的規(guī)則優(yōu)先。一般權(quán)重值跟對象,是否有特異度和位置先后有關(guān)。
css中為什么要有層疊機制
因為在css中可能會有多個樣式同時影響同一個元素的某個屬性,層疊機制可以解決作者(寫代碼的人),用戶(瀏覽頁面的人)和用戶代理(一般指瀏覽器)的樣式?jīng)_突。
在層疊中每個樣式規(guī)則都有一個權(quán)重值,當(dāng)其中幾條規(guī)則同時生效時,權(quán)重最大的規(guī)則優(yōu)先。一般來說作者指定的樣式權(quán)重值高于用戶樣式權(quán)重值,用戶樣式權(quán)重高于客戶端(用戶代理)權(quán)重值。一般權(quán)重值跟對象,是否有!important,特異度和位置先后有關(guān)。在層疊順序中,以下權(quán)重值從小到大
(1)用戶代理樣式
(2)用戶一般樣式
(3)作者一般樣式
(4)作者重要樣式(!important)
(5)用戶重要樣式(!important)
(6)如果是兩個樣式來自相同的代碼,如都來自作者(代碼),并且它們的樣式聲明同樣重要,則根據(jù)特異度來計算,特異度高的會覆蓋特異度低的
(7)如果特異度也相同,則越往后的樣式優(yōu)先級越高
為什么用戶設(shè)置的重要樣式比作者重要樣式優(yōu)先級高,這樣做的原因是為了方便用戶實現(xiàn)一些特殊的要求,例如頁面字體大小的調(diào)整等。
選擇器特異度的計算(1)如果一個聲明出現(xiàn)在元素的style屬性中,則將a計為1;
(2)b等于選擇器中所有ID選擇器加起來的數(shù)量和
(3)c等于選擇器中所有class選擇器和屬性選擇器,以及偽類選擇器加起來的數(shù)量和
(4)d等于選擇器中所有標簽選擇器和偽元素選擇器加起來的數(shù)量和
a-b-c-d即是選擇器的特異度,比較順序從a先比起,誰先大則優(yōu)先級就越高。
注意:
繼承的優(yōu)先級最低,沒有特異度
結(jié)合符(如+,>)及通用選擇符(*)特異度為0
.box{} /*特異度=0,0,1,0*/ .box div{} /*特異度=0,0,1,1*/ #nav li{} /*特異度=0,1,0,1*/ p:first-line{} /*特異度=0,0,0,2*/ style="" /*特異度=1,0,0,0*/
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/113446.html
摘要:問題在寫時,有時候會遇到瀏覽器中顯示的樣式和自己的預(yù)期不符合的情況,這是因為沒有理解的層疊機制。清楚地理解了他這三大法寶,我們就能精準的預(yù)測出每個元素在瀏覽器中的樣式了。 問題: 在寫CSS時,有時候會遇到瀏覽器中顯示的樣式和自己的預(yù)期不符合的情況,這是因為沒有理解CSS的層疊機制。例如文檔中有一個p元素,用內(nèi)聯(lián)樣式為他設(shè)置了顏色: 2016年10月20日 在CSS中又用不同的方式給...
摘要:在層疊中每個樣式規(guī)則都有一個權(quán)重值,當(dāng)其中幾條規(guī)則同時生效時,權(quán)重最大的規(guī)則優(yōu)先。一般權(quán)重值跟對象,是否有特異度和位置先后有關(guān)。 css中為什么要有層疊機制 因為在css中可能會有多個樣式同時影響同一個元素的某個屬性,層疊機制可以解決作者(寫代碼的人),用戶(瀏覽頁面的人)和用戶代理(一般指瀏覽器)的樣式?jīng)_突。 在層疊中每個樣式規(guī)則都有一個權(quán)重值,當(dāng)其中幾條規(guī)則同時生效時,權(quán)重最大的規(guī)...
摘要:為了解決沖突,確定哪條規(guī)則勝出并最終被應(yīng)用,提供了三種機制繼承層疊和特指。整個檢查更新過程結(jié)束后,再將每個標簽以最終設(shè)定的樣式顯示出來。層疊規(guī)則四順序決定權(quán)重。規(guī)則三設(shè)定的樣式勝過繼承的樣式,此時不用考慮特指度即顯式設(shè)定優(yōu)先。 為了解決沖突,確定哪條規(guī)則勝出并最終被應(yīng)用,CSS提供了三種機制:繼承、層疊和特指。 1.繼承 CSS 中的祖先元素會向后代傳遞一樣?xùn)|西:CSS屬性...
摘要:我們知道字體屬性在任意時刻都只能應(yīng)用一種設(shè)定那此時該應(yīng)用哪種字體呢為解決類似的沖突確定哪條規(guī)則勝出并最終被應(yīng)用提供了三種機制繼承層疊和特指。層疊規(guī)則層疊規(guī)則一找到應(yīng)用給每個元素和屬性的所有聲明。層疊規(guī)則五設(shè)定的永遠大于繼承的。 在一個較大的樣式表中,可能會有很多條規(guī)則都選擇同一個元素的同一個屬性。比 如,一個帶有類屬性的段落,可能會被一條以標簽名作選擇符的規(guī)則選中并指定一 種字體,而另...
摘要:摘自設(shè)計指南樣式來源上文中提到,之所以有層疊的概念,是因為有多個樣式來源。優(yōu)先級相同條件下例如都來自引用樣式,覆蓋的默認規(guī)則是后者覆蓋前者,但是有一個特殊情況,其實優(yōu)先級最高。 這一節(jié)就開始實踐上一節(jié)的思路! 1.層疊的概念 簡言之,層疊就是瀏覽器對多個樣式來源進行疊加,最終確定結(jié)果的過程。舉一個簡單的例子: showImg(https://segmentfault.com/img/b...
閱讀 2005·2021-11-23 10:08
閱讀 2340·2021-11-22 15:25
閱讀 3276·2021-11-11 16:55
閱讀 775·2021-11-04 16:05
閱讀 2610·2021-09-10 10:51
閱讀 716·2019-08-29 15:38
閱讀 1589·2019-08-29 14:11
閱讀 3489·2019-08-29 12:42