舉例詳解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;

　　}