css權重及優先級問題

幾個值的對比

初始值

指定值

計算值

應用值

CSS屬性的 指定值 (specified value)會通過下面3種途徑取得： 在當前文檔的樣式表中給這個屬性賦的值，會被優先使用。

如果在當前文檔的樣式表中沒有給這個屬性賦值，那么它會嘗試從父元素那繼承一個值。

如果上面的兩種途徑都不可行，則把CSS規范中針對這個元素的這個屬性的初始值作為指定值

應用值(used value)是完成所有計算后最終使用的值。計算出CSS屬性的最終值有三個步驟。

首先，指定值specified value 取自樣式層疊 (選取樣式表里權重最高的規則), 繼承 (如果屬性可以繼承則取父元素的值)，或者默認值。

然后，按規范算出 計算值computed value。

最后，計算布局(尺寸比如 auto 或 百分數 換算為像素值 )， 結果即 應用值used value。

這些步驟是在內部完成的，腳本只能使用 window.getComputedStyle 獲得最終的應用值。

CSS 2.0 只定義了 計算值 computed value 作為屬性計算的最后一步。 CSS 2.1 引進了定義明顯不同的的應用值，這樣當父元素的計算值為百分數時子元素可以顯式地繼承其高寬。 對于不依賴于布局的 CSS 屬性 (例如 display, font-size, line-height)計算值與應用值一樣，否則就會不一樣

優先級

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

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

如果優先級相同，靠后的 CSS 會應用到元素上。

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

通用選擇器(*)

元素(類型)選擇器

類選擇器

屬性選擇器

偽類

ID 選擇器

內聯樣式

!important 規則例外 Link

當 !important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪里. 盡管如此,!important規則還是與優先級毫無關系.使用 !important 不是一個好習慣，因為它改變了你樣式表本來的級聯規則，從而使其難以調試。

一些經驗法則：

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時: Here is a title!

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

外邊距合并

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

可替換元素

CSS 里，可替換元素是這樣一些元素， 其展現不是由CSS來控制的。這些外部元素的展現不依賴于CSS規范。 典型的可替換元素有

、 、 以及 、 這樣的表單元素。 一些元素，比如 和 ，只在一些特殊情況下是可替換元素。 使用了 CSS content 屬性插入的對象被稱作匿名的可替換元素。

CSS在某些情況下會對可替換元素做特殊處理，比如計算外邊距和處理值為 auto 的情況。

需要注意的是，一部分(并非全部)可替換元素，本身具有尺寸和基線，會被一些 CSS 屬性用到，比如 vertical-align。

LINKS

MDN

w3school

本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源：php中文網

總結

以上是生活随笔為你收集整理的html css控制优先级,css权重及优先级问题_html/css_WEB-ITnose的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。