css權重是什麼

時間 2019-12-11

標籤 css 權重什麼欄目 CSS 简体版

原文原文鏈接

css權重是什麼？

概述

css Specificity中文通常譯爲css優先級、css權重。相比「權重」，「優先級」更好理解，mozilla官方中文文檔就翻譯爲「優先級」。css

Specificity基於設定的匹配規則，瀏覽器經過設定好的優先級來判斷哪些屬性值DOM元素最爲相關，從而在該DOM上應用這些值。html

簡單理解就是一個DOM的某個屬性值有多個css樣式設置，優先級高的那個應用。不少css設置不生效的問題，都是由於在某處定義了一個更高的優先級，從而致使該處樣式不生效。瀏覽器

優先級的順序以下：
important > 內聯(style) > ID > 類(class) > 標籤(li...) | 僞類(:hover,:focus...) | 屬性選擇[attr=''] > 僞對象(:before,:after) > 通配符(*) > 繼承(inherit)
那麼如何肯定優先級呢？url

Specificity值的計算

先說結論：spa

通常採用10進制的簡單相加計算方式。從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者僞類+10，一個元素名，或者僞元素+1.

具體的css的規則以下：翻譯

A：若是規則是寫在標籤的style屬性中（內聯樣式），則A=1，不然，A=0. 對於內聯樣式，因爲沒有選擇器，因此 B、C、D 的值都爲 0，即 A=1, B=0, C=0, D=0（簡寫爲 1,0,0,0，下同）。
B：計算該選擇器中ID的數量。（例如，#header 這樣的選擇器，計算爲 0, 1, 0, 0）。
C：計算該選擇器中僞類及其它屬性的數量（包括類選擇器、屬性選擇器等，不包括僞元素）。（例如， .logo[id='site-logo'] 這樣的選擇器，計算爲 0, 0, 2, 0）。
D：計算該選擇器中僞元素及標籤的數量。（例如，p:first-letter 這樣的選擇器，計算爲0, 0, 0, 2）。

/*通配選擇符(Universal Selector)*/     * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
/*類型選擇符(Type Selectors)*/         li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
/*類選擇符(Class Selectors)*/         .active{color:blue;}/* a=0 b=0 c=1 d=0 -> specificity = 0,0,1,0 */
/*僞類選擇符(Pseudo-classes Selectors)*/li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
/*屬性選擇符(Attribute Selectors)*/   h[title] {color:blue;} /* a=0 b=0 c=1 d=0 -> specificity = 0,0,1,0 */
/*ID選擇符(ID Selectors)*/            #sj{ font-size:12px;}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
/*內聯(style)*/                       style=""                /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
/*包含選擇符(Descendant Selectors)*/  ul li {} /* a=0 b=0 c=0 d=1+1 -> specificity = 0,0,0,2 */
/*相鄰+屬性選擇符(Adjacent Sibling Selectors)*/ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

大多數狀況下，按照以上的理解得出的結論是沒問題的，不過總有例外，如調試

body header div nav ul li div p a span em {color: red}
.ctn{color:blue}

按照錯誤的計算方法，樣式一的權重值是11，樣式二的權重值是10，若是這兩條規則用於同一個元素，則該元素應該是紅色。實際結果倒是藍色。code

所以還有一些基本的規則htm

優先級的基本規則

1.相同的權重：之後面出現的選擇器爲最後規則對象

假如在外部樣式表中，同一個CSS規則你寫了兩次，那麼出如今前面的選擇器權重低，你的樣式會選擇後面的樣式：

#content h1 {
  padding: 5px;
}

#content h1 {
  padding: 10px;
}

兩個選擇器的權重都是0，1，0，1，最後那個規則生效。

2.不一樣的權重，權重值高則生效

Id選擇器的優先級比屬性選擇器高,好比下面的例子裏樣式表中#p123的權重明顯比[id=p123]的權重要高。

a#a-02 { background-image : url(n.gif); }

a[id="a-02"] { background-image : url(n.png); }

3.就近原則

如我在樣式表中對DOM定義的樣式A,而後我又在html也對DOM定義了B,應用B

.A {
  padding: 5px;
}

<style type="text/css">
  .B {
    padding: 10px;
  }
</style>

4.不管多少個元素組成的選擇器，都沒有一個class選擇器優先級高。

就是上面的那個例外。

5.無視DOM樹的距離

以下樣式：

body h1 {
  color: green;
}
html h1 {
  color: purple;
}

當它應用在下面的HTML時:

<html>
<body>
  <h1>Here is a title!</h1>
</body>
</html>

瀏覽器會將它渲染成purple;
實際上規則1也適用於此，不過因爲其DOM負極標籤的不一樣，故單拎出來特殊化。

6.:not 僞類例外

:not 否認僞類在優先級計算中不會被看做是僞類. 事實上, 在計算選擇器數量時仍是會把其中的選擇器當作普通選擇器進行計數.

div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: lime;
}

當它被應用在下面的HTML時,就是文字描述效果

<div class="outer">
  <p>orange</p>
  <div class="inner">
    <p>lime</p>
  </div>
</div>

7.!important 規則例外

當在一個樣式聲明上使用 !important 規則時，該樣式聲明會覆蓋CSS中任何其餘的聲明。

儘管技術上 !important 與優先級毫無關係，可是它們之間直接相互影響。

使用 !important 是一個壞習慣，應該儘可能避免，由於這打斷了樣式表中的固有的級聯規則使得調試找bug變得更加困難了。

當兩條相互衝突的帶有!important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被採用。

具體的參考!important_規則例外,就不一一粘貼過來了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。