深刻理解css優(yōu)先選擇權(quán)

1、第 1 頁 共 3 頁深刻理解深刻理解 css 優(yōu)先選擇權(quán)優(yōu)先選擇權(quán)css 優(yōu)先挑選權(quán)讓一些新手十分頭疼， 下面 divcss5 小編帶大家深化理解 css 優(yōu)先挑選權(quán)。首先就是 css 規(guī)章的 specificity(特別性)，css2.1 有一套關(guān)于specificity 的計(jì)算方式，用一個四位的數(shù)字串(css2 是三位)來表示，終于 specificity 越高的規(guī)章越特別，在優(yōu)先級判定時也就越有優(yōu)勢。關(guān)于 specificity 的詳細(xì)計(jì)算在各種狀況下的數(shù)字加成有如下普通規(guī)章：每個 id 挑選符(someid)，加 0,1,0,0每個 class 挑選符(.someclass)、每個屬

2、性挑選符(形如attr="等)、每個偽類(形如:hover 等)加 0,0,1,0每個元素或偽元素(:firstchild)等，加 0,0,0,1其他挑選符包括全局挑選符*，加 0,0,0,0 相當(dāng)于沒加，不過這也是一種 specificity，后面會說明。按這些規(guī)章將數(shù)字串逐位相加， 就得到終于計(jì)算得的specificity，然后在比較取舍時根據(jù)從左到右的挨次逐位比較。舉一些例子吧：h1 color: red;/惟獨(dú)一個一般元素加成，結(jié)果是 0,0,0,1body h1 color: green;/兩個一般元素加成，結(jié)果是 0,0,0,2 */ —&am

3、p;mdash;后者勝出第 2 頁 共 3 頁h2.grape color: purple;/一個一般元素、一個 class 挑選符加成，結(jié)果是 0,0,1,1*/h2 color: silver;/一個一般元素，結(jié)果是 0,0,0,1 */ ——前者勝出html body table trid=totals td ul li color: maroon;/7 個一般元素、 一個屬性挑選符、 兩個其他挑選符， 結(jié)果是 0,0,1,7 */lianswer color: navy;/一個id挑選符， 一個一般挑選符， 結(jié)果是0,1,0,1 */ &

4、mdash;—后者勝出除了 specificity 還有一些其他規(guī)章：文內(nèi)的樣式優(yōu)先級為 1,0,0,0，所以始終高于外部定義。這里文內(nèi)樣式指形如 blah 的樣式， 而外部定義指經(jīng)由或標(biāo)簽定義的規(guī)章。有!important 聲明的規(guī)章高于一切。假如!important 聲明矛盾，則比較優(yōu)先權(quán)。假如優(yōu)先權(quán)一樣，則根據(jù)在源碼中浮現(xiàn)的挨次打算，后來者居上。由繼承而得到的樣式?jīng)]有 specificity 的計(jì)算，它低于一切其他規(guī)章(比如全局挑選符*定義的規(guī)章)。關(guān)于經(jīng)由import 載入的外部樣式， 因?yàn)閕mport 必需浮現(xiàn)在全部其他規(guī)章定義之前(如不是，則掃瞄器應(yīng)當(dāng)忽視之)，所以根據(jù)青出于藍(lán)原則，普通優(yōu)先權(quán)矛盾時是占下風(fēng)的。這里需要提一下 ie，ie 是可以識別位置錯誤的i