CSS規(guī)則的執(zhí)行順序_第1頁(yè)
CSS規(guī)則的執(zhí)行順序_第2頁(yè)
CSS規(guī)則的執(zhí)行順序_第3頁(yè)
CSS規(guī)則的執(zhí)行順序_第4頁(yè)
CSS規(guī)則的執(zhí)行順序_第5頁(yè)
已閱讀5頁(yè)，還剩5頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、CSS規(guī)則的執(zhí)行順序dadaV20160306本文向大家描述一下CSS執(zhí)行順序與優(yōu)先權(quán)的問題，首先就是CSS規(guī)則的specificity(特殊性)，CSS2.1有一套關(guān)于specificity的計(jì)算方式，用一個(gè)四位的數(shù)字串(CSS2是三位)來表示，最終specificity越高的規(guī)則越特殊，在優(yōu)先級(jí)判定時(shí)也就越有優(yōu)勢(shì)。CSS執(zhí)行順序與優(yōu)先權(quán)的問題:CSS執(zhí)行順序與優(yōu)先權(quán)的問題其實(shí)就是一個(gè)沖突解決的問題，當(dāng)同一個(gè)元素(或內(nèi)容)被CSS選擇符選中時(shí)，就要按照優(yōu)先權(quán)取舍不同的CSS規(guī)則，這其中涉及到的問題其實(shí)很多。首先就是CSS規(guī)則的specificity(特殊性)，CSS2.1有一套關(guān)于speci

2、ficity的計(jì)算方式，用一個(gè)四位的數(shù)字串(CSS2是三位)來表示，最終specificity越高的規(guī)則越特殊，在優(yōu)先級(jí)判定時(shí)也就越有優(yōu)勢(shì)。關(guān)于specificity的具體計(jì)算在各種情況下的數(shù)字加成有如下一般規(guī)則：每個(gè)ID選擇符(#someid)，加0,1,0,0；每個(gè)class選擇符(.someclass)、每個(gè)屬性選擇符(形如attr=”"等)、每個(gè)偽類(形如:hover等)加0,0,1,0；每個(gè)元素或偽元素(:firstchild)等，加0,0,0,1；其他選擇符包括全局選擇符*，加0,0,0,0。相當(dāng)于沒加，不過這也是一種specificity，后面會(huì)解釋。按這些規(guī)則將數(shù)字串

3、逐位相加，就得到最終計(jì)算得的specificity，然后在比較取舍時(shí)按照從左到右的順序逐位比較。舉一些例子吧：Example SourceCodeh1color:red; body h1color:green; 后者勝出 h2.grapecolor:purple;前者勝出h2color:silver; html>bodytabletrid="totals"tdul>licolor:maroon; li #answercolor:navy;后者勝除了specificity還有一些其他規(guī)則：文內(nèi)的樣式優(yōu)先級(jí)為1,0,0,0，所以始終高于外部定義。這里文內(nèi)樣式指形如&

4、lt;divstyle=”color:red”>blah</div>的樣式，而外部定義指經(jīng)由<link>或<style>標(biāo)簽定義的規(guī)則。有!important聲明的規(guī)則高于一切。如果!important聲明沖突，則比較優(yōu)先權(quán)。如果優(yōu)先權(quán)一樣，則按照在源碼中出現(xiàn)的順序決定，后來者居上。由繼承而得到的樣式?jīng)]有specificity的計(jì)算，它低于一切其他規(guī)則(比如全局選擇符*定義的規(guī)則)。關(guān)于經(jīng)由import載入的外部樣式，由于import必須出現(xiàn)在所有其他規(guī)則定義之前(如不是，則瀏覽器應(yīng)該忽略之)，所以按照后來居上原則，一般優(yōu)先權(quán)沖突時(shí)是占下風(fēng)的。這里需要

5、提一下IE，IE是可以識(shí)別位置錯(cuò)誤的import的，但無論import在什么地方，它都認(rèn)為是位于所有其他規(guī)則定義之前的，這可能會(huì)引發(fā)一些誤會(huì)。所以優(yōu)先權(quán)問題雖然看起來簡(jiǎn)單，但其背后還是有蠻復(fù)雜的機(jī)制的，需要多多留意。1、特殊性首先來看一下這個(gè)例子將會(huì)發(fā)生的情形： 以下是代碼片段：.grape color:Blue; H1 color: Red; <h1 class="grape">Meerkat <em>Central</em></h1> H1和.grape都匹配上面的H1元素，那么到底應(yīng)該使用哪一個(gè)呢？實(shí)踐證明.grape是

6、正確答案，把句子顯示為藍(lán)色。根據(jù)規(guī)范，一般的HTML元素選擇符(H1,P 等)具有特殊性1，類選擇符具有特殊性10，ID選擇符具有特殊性100，值越大權(quán)重就越大，就優(yōu)先選用。 以下是代碼片段：H1 color: Red; P EM color: Blue; .grape color: Fuchsia; P.bright color: Yellow; P.bright EM.dark color: Gray; #ID01 color: Red; 2、繼承在特殊性的框架下，被繼承的值具有特殊性0，也就是說任何顯式聲明的規(guī)則將會(huì)覆蓋其繼承樣式，即便這條規(guī)則具有多高的權(quán)重。 以下是代碼片段：H1#ID

7、01 color: Red; EM color: Gray; <H1 ID="ID01>Meerkat <EM><Central</EM></H1> 雖然ID選擇符特殊性最高，但由于在特殊性的框架下，繼承值只有特殊性0，因些Central會(huì)顯示為Gray顏色。 3、STYLE元素 還有sytle元素在CSS下權(quán)值定義為100，盡管ID選擇也一樣，實(shí)際上style元素比ID具有更高的特殊性。 以下是代碼片段：#ID01 EM color: Gray; <H1 ID="ID01">Meerkat <

8、;EM style="color: red;">Central</EM>!</H1> 會(huì)顯示為red顏色。4、重要性(!important)!important具最高特特性比如說1000，因此!important規(guī)則會(huì)覆蓋內(nèi)聯(lián)STYLE屬性的內(nèi)容。 以下是代碼片段：H1 color: red !important; <H1 style="color:black;">Meerkat Central!</H1> 將顯示為RED顏色。 一種特殊情形 以下是代碼片段：P#warn color: Red !im

9、portant; EM color: Black; <p id="warn">This text is red, but <em>emphasized text is black.</em></p> 雖然定義!important最高特殊性，但句子并沒有全部顯示為RED紅色，為什么呢？也許我們得回頭看看前面的規(guī)則，在前面的第二點(diǎn)繼承中提“在特殊性的框架下，繼承值只有特殊性0。”因此即便定義!important，繼承里的特殊性也只有0，所以顯示為特殊性為1的EM規(guī)則。權(quán)重順序?yàn)椋豪^承 => HTML普通選擇符 => 類

10、選擇符 =>style元素 => !important5、層疊1) 若兩條規(guī)則具有相同的權(quán)值、起源及特殊性，那在樣式表中最后出現(xiàn)的規(guī)則優(yōu)先。2) 任何位于文檔中的規(guī)則都比引入的規(guī)則優(yōu)先。CSS樣式覆蓋規(guī)則大家都知道CSS的全稱叫做“層疊樣式表”，但估計(jì)很多人都不知道“層疊”二字的含義。其實(shí)，“層疊”指的就是樣式的覆蓋，當(dāng)一個(gè)元素被運(yùn)用上多種樣式，并且出現(xiàn)重名的樣式屬性時(shí)，瀏覽器必須從中選擇一個(gè)屬性值，這個(gè)過程就叫“層疊”。樣式覆蓋（這種叫法更大眾化些）遵循一定的規(guī)則，之前我對(duì)這個(gè)規(guī)則一直似懂非懂的，直到這幾天看了”CSS: The Missing Manual”，才豁然開朗。下面是

11、我的一些學(xué)習(xí)筆記。首先需要明確的是，很多情況都會(huì)導(dǎo)致一個(gè)元素被運(yùn)用上多種樣式，樣式覆蓋的規(guī)則也需要根據(jù)不同的情況來定，具體規(guī)則如下。規(guī)則一：由于繼承而發(fā)生樣式?jīng)_突時(shí)，最近祖先獲勝。CSS的繼承機(jī)制使得元素可以從包含它的祖先元素中繼承樣式，考慮下面這種情況：<html><head><title>rule 1</title><style>body color:black;p color:blue;</style></head><body> <p>welcome to <strong&g

12、t;gaodayue的網(wǎng)絡(luò)日志</strong></p></body></html>strong分別從body和p中繼承了color屬性，但是由于p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍(lán)色。規(guī)則二：繼承的樣式和直接指定的樣式?jīng)_突時(shí)，直接指定的樣式獲勝。在上面的例子中，假如還指定了strong元素的樣式，如：strong color:red;那么根據(jù)規(guī)則二，strong中的文字最終顯示為紅色。規(guī)則三：直接指定的樣式發(fā)生沖突時(shí)，樣式權(quán)值高者獲勝。樣式的權(quán)值取決于樣式的選擇器，權(quán)值定義如下表。CSS選擇器權(quán)值標(biāo)簽選擇器1類

13、選擇器10ID選擇器100內(nèi)聯(lián)樣式1000偽元素(:first-child等)1偽類(:link等)10可以看到，內(nèi)聯(lián)樣式的權(quán)值>>ID選擇器>>類選擇器>>標(biāo)簽選擇器，除此以外，后代選擇器的權(quán)值為每項(xiàng)權(quán)值之和，比如”#nav .current a”的權(quán)值為100 + 10 + 1 = 111。規(guī)則四：樣式權(quán)值相同時(shí)，后者獲勝?？紤]下面這種情況<p class="byline">Written by <a class="email" href="mailto:jeancosmofarmer.

14、 com">Jean Graine de Pomme</a></p>.byline a color:red;p .email color:blue;“.byline a”與”p .email”都直接指定了上面的a元素，且權(quán)值都為11，根據(jù)規(guī)則四，最終顯示藍(lán)色。由于樣式表可以是外部的，也可以是內(nèi)部的，規(guī)則四提醒我們要注意外部樣式表引入的順序（及<link>元素的順序），以及外部樣式表與內(nèi)部樣式表的出現(xiàn)位置。一般來說，內(nèi)部樣式表出現(xiàn)在所有外部樣式表的引入之后，一般是在</head>之前。規(guī)則五：!important的樣式屬性不被覆蓋。

15、!important可以看做是萬不得已的時(shí)候，打破上述四個(gè)規(guī)則的”金手指”。如果你一定要采用某個(gè)樣式屬性，而不讓它被覆蓋的，可以在屬性值后加上!important，以規(guī)則四的例子為例，”.byline a color:red !important;”可以強(qiáng)行使鏈接顯示紅色。大多數(shù)情況下都可以通過其他方式來控制樣式的覆蓋，不能濫用!important。CSS規(guī)則的執(zhí)行順序你對(duì)CSS規(guī)則的執(zhí)行順序是否了解，這里和大家分享一下，若兩條規(guī)則具有相同的權(quán)值、起源及特殊性，那在樣式表中最后出現(xiàn)的規(guī)則優(yōu)先。1、CSS規(guī)則之特殊性首先來看一下這個(gè)例子將會(huì)發(fā)生的情形：復(fù)制代碼<style type=&qu

16、ot;text/css"> .grapecolor: Blue; H1color: Red;</style><h1 class="grape"> Meerkat <em>Central </em></h1>復(fù)制代碼H1和.grape都匹配上面的H1元素，那么到底應(yīng)該使用哪一個(gè)呢？實(shí)踐證明.grape是正確答案，把句子顯示為藍(lán)色。根據(jù)規(guī)范，一般的HTML元素選擇符(H1,P等)具有特殊性：1、類選擇符具有特殊性10，ID選擇符具有特殊性100，值越大，權(quán)重就越大，越優(yōu)先。復(fù)制代碼<style t

17、ype="text/css"> H1 color: Red; /*特殊性=1*/ PEM color: Blue; /*特殊性=2*/ .grape color: Fuchsia; /*特殊性=10*/ P.bright color: Yellow; /*特殊性=11*/ P.brightEM.dark color: Gray; /*特殊性=12*/ #ID01 color: Red; /*特殊性=100*/</style>復(fù)制代碼2、CSS規(guī)則之繼承在特殊性的框架下，被繼承的值具有特殊性0，也就是說任何顯式聲明的規(guī)則將會(huì)覆蓋其繼承樣式，即便這條規(guī)則具有多

18、高的權(quán)重。復(fù)制代碼<style type="text/css"> #ID01color:Red; /*特殊性=100*/ EMcolor:Gray; /*特殊性=1*/</style><h1 id="ID01"> Meerkat<em> Central</em></h1>復(fù)制代碼雖然ID選擇符特殊性最高，但由于在特殊性的框架下，繼承值只有特殊性0，因些Central會(huì)顯示為Gray顏色。3、CSS規(guī)則之STYLE元素還有sytle元素在CSS下權(quán)值定義為100，盡管ID選擇也一樣，實(shí)際上style元素比ID具有更高的特殊性。<style type="text/css"> #ID01, EMcolor:Gray; </style><h1 id="ID01"> Meerkat<em style="color:red;"> Central</em></h1>會(huì)顯示為red顏色。4、CSS規(guī)則之重要性(!important)!important具最高特特性比如說1000，因此!important規(guī)則會(huì)覆蓋內(nèi)聯(lián)STYLE屬性的內(nèi)容。程序代碼

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論