計算優先級
優先級是根據由每種選擇器類型構成的級聯字串計算而成的。他是一個對應匹配表達式的權重。 如果優先級相同，靠後的 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;
}