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