是 CSS 的一個基本特征,它是一個定義了如何合並來自多個源的屬性值的算法。簡單地說,就是 CSS 規則的順序。它在 CSS 處於核心地位,CSS 的全稱層疊樣式表正是強調了這一點。有三個因素需要考慮,根據重要性排序(遞增)如下:
資源順序 - 如果你有超過一條規則,而且都是相同的權重,那麼最後麵的規則會應用。
優先級 - 決定在發生衝突的時候應該使用哪條規則。例如有些規則在最後出現,但是卻應用了前麵的具有衝突的規則,這是因為前麵的有更高的優先級——它範圍更小。
重要程度 - 特殊的 CSS 規則 !important,用於修改特定屬性的值,能夠覆蓋普通規則的層疊。
大多數 @規則的 CSS 聲明是參與層疊計算的,比如包含於 @media、@documents 或者@supports 的 CSS 聲明,但是包含於 @keyframes 和 @font-face 的聲明不參與計算,因為它們是作為一個整體參與層疊算法的篩選。另外,@import 和 @charset 遵循特定的算法,不受層疊算法影響。
還可以使用 CSS @規則 中的 @layer 聲明一個級聯層,同一層內的規則將級聯在一起,優先級的順序由聲明層的順序來決定,這給予了開發者對層疊機製的更多控製。
優先級
優先級是基於不同種類選擇器組成的匹配規則。瀏覽器是根據優先級來決定當多個規則有不同選擇器對應相同的元素的時候需要使用哪個規則。
如果一個元素選擇器不是很具體,例如選擇頁麵上該類型的所有元素(或偽元素),則它的優先級就會低一些。
如果一個類選擇器稍微具體點,例如選擇該頁麵中有特定 class 屬性值(或其他屬性選擇器)的元素,則它的優先級就要高一點。
如果一個類選擇器更具體點,例如選擇該頁麵中有特定 id 屬性值的元素,則它的優先級就要更高一點。
給元素添加的內聯樣式 (例如,styleu003d\"font-weight:bold\") 總會覆蓋外部樣式表的任何樣式,因此可看作是具有最高的優先級。
當在一個樣式聲明中使用一個 !important 規則時,將覆蓋任何其他聲明,與優先級無關。
下表列出了樣式來源和其對應地重要程度(遞增),例如 CSS 動畫用 @keyframes @規則定義的值會覆蓋全部普通值,但會被 !important 的值覆蓋。
重要程度來源1用戶代理2用戶3頁麵作者4CSS 動畫5頁麵作者(!important)6用戶(!important)7用戶代理(!important)8css 過渡 (css transitions)