詳解 CSS 屬性 - 優先級問題

ZoomQuiet 發布于2019-08-28 17:55 / 604人閱讀

摘要：當你將一個樣式添加到元素上卻發現不起作用時，那就是遇到優先級問題了。那么應該如何處理優先級問題呢，下面我總結了一些解決優先級問題的常用法則。如內部樣式外部樣式內聯樣式此時顯示的優先級是。

當你將一個樣式添加到元素上卻發現不起作用時，那就是遇到優先級問題了。那么應該如何處理 CSS 優先級問題呢，下面我總結了一些解決 CSS 優先級問題的常用法則。

樣式距離

我們可以通過使用外部樣式、內部樣式、內聯樣式等方法給元素添加指定的樣式，此時的優先級是:

外部樣式 < 內部樣式 < 內聯樣式

這個應該比較容易理解，也就是說離元素距離越近的樣式優先級越大。如：


 //外部樣式(color:green)
my color//內聯樣式

此時顯示的優先級是 red > blue > green。所以 my color 顯示為紅色。

特殊的計算方法

假設有下面這段代碼：



  my color

我們面對下面的 css，如何判斷優先級呢？

這里介紹一種特殊的計算方法：

元素, 偽元素: 1 – (0,0,0,1)

類, 偽類, 屬性: 1 – (0,0,1,0)

ID: 1 – (0,1,0,0)

內聯樣式: 1 – (1,0,0,0)

這里的屬性指的是：

效果如下：

優先級從上往下依次增加，至于如何計算，同樣舉例說明：

p: 1個元素– (0,0,0,1)

div: 1個元素 – (0,0,0,1)

#idSelector: 1個ID – (0,1,0,0)

div#idSelector: 1個元素, 1個ID – (0,1,0,1)

div#idSelector p: 2個元素, 1個ID– (0,1,0,2)

div#idSelector p.classSelector: 2個元素, 1個類, 1個ID – (0,1,1,2)

所以現在我們再來看上面的例子：

  div p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)
  #idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)

由于優先級上 (0,1,0,1) > (0,0,1,2)，所以我們知道最后顯示的顏色為紅色。

繼承

繼承是個比較好理解的概念，即子元素會繼承父元素的樣式。例如：


  my color

上例中的 span 會繼承父元素 div 的樣式。但不是所有的屬性都會默認使用繼承的方式，比如 margin 和 padding 屬性。例如：


  my color

此時，元素 p 并不會繼承父元素 div 的 margin 和 padding 樣式，除非你這么做：


  my color

總結

1.首先找到所有作用在元素上的樣式。（不要忽略來自繼承的樣式）
2.計算樣式的作用距離，距離越近，優先級越大。
3.使用特殊的計算方法來判斷同距離內的樣式。
4.如果計算后的結果相同，那么后聲明的樣式覆蓋先前聲明的樣式。
5.如果某個樣式中設置 !important，則無論它的優先級如何，都以該樣式為準。（除非迫不得已，強烈不建議使用這個方法，因為這無疑是不符合 css 思想的用法）

參考

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

GPU云服務器云服務器屬性優先級屬性詳解屬性選擇器詳解 Mask屬性詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110897.html

CSS優先級詳解

摘要：優先級是由選擇器組成的匹配規則決定的。這些繼承的樣式的優先級永遠低于元素本身的樣式，包括通用選擇器最終的顏色是紅色的。永遠都要優先考慮使用樣式規則的優先級來解決問題而不是。概念瀏覽器是通過判斷優先級，來決定到底哪些屬性值是與元素最相關的，從而應用到該元素上。優先級是由選擇器組成的匹配規則決定的。如何計算? 優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對...

Juven 2019-08-28 17:53 評論0 收藏0
CSS優先級詳解

摘要：優先級是由選擇器組成的匹配規則決定的。這些繼承的樣式的優先級永遠低于元素本身的樣式，包括通用選擇器最終的顏色是紅色的。永遠都要優先考慮使用樣式規則的優先級來解決問題而不是。概念瀏覽器是通過判斷優先級，來決定到底哪些屬性值是與元素最相關的，從而應用到該元素上。優先級是由選擇器組成的匹配規則決定的。如何計算? 優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對...

n7then 2019-08-01 14:37 評論0 收藏0
性能優化詳解

摘要：幾個月前面試的時候問我性能優化我可能會開始背誦雅虎軍規，加點，代碼層面稍稍講點，現在系統的梳理下性能優化的方方面面本文涉及方面有代碼優化網絡請求過程角度入手解析建立鏈接網絡往返時延數據傳輸網絡問題角度入手請求數量流量性能優化測試工具代碼優化幾個月前面試的時候問我性能優化我可能會開始背誦雅虎軍規，加點webp，代碼層面稍稍講點，現在系統的梳理下性能優化的方方面面本文涉及方面有: 代...

piapia 2019-08-21 10:57 評論0 收藏0
性能優化詳解

摘要：幾個月前面試的時候問我性能優化我可能會開始背誦雅虎軍規，加點，代碼層面稍稍講點，現在系統的梳理下性能優化的方方面面本文涉及方面有代碼優化網絡請求過程角度入手解析建立鏈接網絡往返時延數據傳輸網絡問題角度入手請求數量流量性能優化測試工具代碼優化幾個月前面試的時候問我性能優化我可能會開始背誦雅虎軍規，加點webp，代碼層面稍稍講點，現在系統的梳理下性能優化的方方面面本文涉及方面有: 代...

godlong_X 2019-08-06 13:17 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0