萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 舉例詳解CSS中的的優先級

舉例詳解CSS中的的優先級

   計算優先級

  優先級是根據由每種選擇器類型構成的級聯字串計算而成的。他是一個對應匹配表達式的權重。 如果優先級相同,靠後的 CSS 會應用到元素上。

  注意:元素在文檔樹中的位置是不會影響優先級的

  優先級順序

  優先級逐級增加的選擇器列表:

  通用選擇器(*)

  元素(類型)選擇器

  類選擇器

  屬性選擇器

  偽類

  ID 選擇器

  內聯樣式

  基於類型的優先級

  優先級是根據選擇器類型進行計算的. 在下面的例子中,屬性選擇器盡管選擇了一個ID但是在優先級計算法則中還是根據其類型計算。

  有如下樣式聲明:

  CSS Code復制內容到剪貼板

  * #foo {

  color: green;

  }

  *[id="foo"] {

  color: purple;

  }

  將其應用在下面的HTML中:

  XML/HTML Code復制內容到剪貼板

  

I am a sample text.

 

  演示例子:https://jsfiddle.net/donqi/vmo5m3re/

  選擇器優先級一致

  優先級相同的情況下,後邊定義的會覆蓋前邊定義的

  XML/HTML Code復制內容到剪貼板

  

 

 

  

 

 

  

 

 

  css:

  CSS Code復制內容到剪貼板

  div{

  height:100px;

  width:100px;

  padding:20px;

  margin:20px;

  border:10px solid hsla(0,0%,0%,0.5);

  background-color:#ccc;

  background-image:url("/favicon.png");

  background-repeat:space;

  background-origin:content-box;

  }

  div.box{

  background-clip:content-box;

  }

  div.border{

  background-clip:border-box;

  }

  div.padding{

  background-clip:padding-box;

  }

copyright © 萬盛學電腦網 all rights reserved