亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

解析CSS編寫中的屬性優(yōu)先級問題

segmentfault   發(fā)布時間：2016-04-28 11:08:16   作者：StephenLee   我要評論
這篇文章主要介紹了CSS編寫中的屬性優(yōu)先級問題,重點講解了元素之間的層級計算以及繼承關系,需要的朋友可以參考下

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

樣式距離
我們可以通過使用外部樣式、內(nèi)部樣式、內(nèi)聯(lián)樣式等方法給元素添加指定的樣式，此時的優(yōu)先級是:

外部樣式 < 內(nèi)部樣式 < 內(nèi)聯(lián)樣式
這個應該比較容易理解，也就是說離元素距離越近的樣式優(yōu)先級越大。如：

CSS Code復制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.   div{color:blue;} //內(nèi)部樣式   
  3. </style>   
  4. <link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部樣式(color:green)   
  5. <div style="color:red">my color</div>//內(nèi)聯(lián)樣式  

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

特殊的計算方法
假設有下面這段代碼：

CSS Code復制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.   div p.classSelector {color: blue}   
  3.   #idselector p {color: red}   
  4. </style>   
  5. <div id="idSelector">   
  6.   <p class="classSelector">my color</p>   
  7. </div>  

我們面對下面的 css，如何判斷優(yōu)先級呢？

CSS Code復制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.   div p.classSelector {color: blue}   
  3.   #idselector p {color: red}   
  4. </style>  

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

元素, 偽元素: 1 – (0,0,0,1)
類, 偽類, 屬性: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
內(nèi)聯(lián)樣式: 1 – (1,0,0,0)
這里的屬性指的是：
2016428111405879.jpg (592×158)

效果如下：
2016428111437471.jpg (452×47)

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

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)
所以現(xiàn)在我們再來看上面的例子：

CSS Code復制內(nèi)容到剪貼板
  1. div p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)   
  2. #idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)  

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

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

CSS Code復制內(nèi)容到剪貼板
  1. <div style="color:red">   
  2.   <p>my color</p>   
  3. </div>  

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

CSS Code復制內(nèi)容到剪貼板
  1. <div style="margin:10px;padding:10px">   
  2.   <p>my color</p>   
  3. </div>  

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

CSS Code復制內(nèi)容到剪貼板
  1. <div style="margin:10px;padding:10px">   
  2.   <p style="margin:inherit;padding:inherit">my color</p>   
  3. </div>  

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

相關文章

最新評論