css權重及優先級問題

時間 2019-11-20

標籤 css 權重優先級問題欄目 CSS 简体版

原文原文鏈接

css權重及優先級問題

幾個值的對比

初始值
指定值
計算值
應用值

CSS屬性的指定值 (specified value)會經過下面3種途徑取得：css

在當前文檔的樣式表中給這個屬性賦的值，會被優先使用。
若是在當前文檔的樣式表中沒有給這個屬性賦值，那麼它會嘗試從父元素那繼承一個值。
若是上面的兩種途徑都不可行，則把CSS規範中針對這個元素的這個屬性的初始值做爲指定值

應用值（used value）是完成全部計算後最終使用的值。計算出CSS屬性的最終值有三個步驟。html

首先，指定值specified value 取自樣式層疊 (選取樣式表裏權重最高的規則), 繼承 (若是屬性能夠繼承則取父元素的值)，或者默認值。
而後，按規範算出計算值computed value。
最後，計算佈局(尺寸好比 auto 或百分數換算爲像素值 )，結果即應用值used value。
這些步驟是在內部完成的，腳本只能使用 window.getComputedStyle 得到最終的應用值。

CSS 2.0 只定義了計算值 computed value 做爲屬性計算的最後一步。 CSS 2.1 引進了定義明顯不一樣的的應用值，這樣當父元素的計算值爲百分數時子元素能夠顯式地繼承其高寬。對於不依賴於佈局的 CSS 屬性 (例如 display, font-size, line-height)計算值與應用值同樣，不然就會不同canvas

優先級

優先級是瀏覽器是經過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先級僅由選擇器組成的匹配規則決定的。瀏覽器

優先級是根據由每種選擇器類型構成的級聯字串計算而成的。他是一個對應匹配表達式的權重。ide

若是優先級相同，靠後的 CSS 會應用到元素上。佈局

下列是一份優先級逐級增長的選擇器列表：優化

通用選擇器（*）
元素(類型)選擇器
類選擇器
屬性選擇器
僞類
ID 選擇器
內聯樣式

!important 規則例外 Link插件

當 !important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其餘的聲明, 不管它處在聲明列表中的哪裏. 儘管如此,!important規則仍是與優先級毫無關係.使用 !important 不是一個好習慣，由於它改變了你樣式表原本的級聯規則，從而使其難以調試。調試

一些經驗法則：code

Never 永遠不要在全站範圍的 css 上使用!important
Only 只在須要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用!important
Never 永遠不要在你的插件中使用!important
Always 要優化考慮使用樣式規則的優先級來解決問題而不是!important

怎樣覆蓋掉 !important

很簡單，你只須要再加一條 !important 的CSS語句，將其應用到更高優先級的選擇器（在原有基礎上添加額外的標籤、類或 ID 選擇器）上；
或是保持選擇器同樣，但添加的位置須要在原有聲明的後面（優先級相同的狀況下，後邊定義的會覆蓋前邊定義的）。

:not 僞類例外

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

無視DOM樹中的距離

有以下樣式聲明:

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

當它應用在下面的HTML時:

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

瀏覽器會將它渲染成purple，即後面的優先級更高

外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

外邊距合併初看上去可能有點奇怪，可是實際上，它是有意義的。以由幾個段落組成的典型文本頁面爲例。第一個段落上面的空間等於段落的上外邊距。若是沒有外邊距合併，後續全部段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味着段落之間的空間是頁面頂部的兩倍。若是發生外邊距合併，段落之間的上外邊距和下外邊距就合併在一塊兒，這樣各處的距離就一致了。

可替換元素

CSS 裏，可替換元素是這樣一些元素，其展示不是由CSS來控制的。這些外部元素的展示不依賴於CSS規範。典型的可替換元素有 <img>、 <object>、 <video> 以及 <textarea>、 <input> 這樣的表單元素。一些元素，好比 <audio> 和 <canvas> ，只在一些特殊狀況下是可替換元素。使用了 CSS content 屬性插入的對象被稱做匿名的可替換元素。

CSS在某些狀況下會對可替換元素作特殊處理，好比計算外邊距和處理值爲 auto 的狀況。

須要注意的是，一部分（並不是所有）可替換元素，自己具備尺寸和基線，會被一些 CSS 屬性用到，好比 vertical-align。

css權重及優先級問題

css權重及優先級問題

幾個值的對比

優先級

外邊距合併

可替換元素

LINKS