計算優(yōu)先級

　　優(yōu)先級是根據(jù)由每種選擇器類型構成的級聯(lián)字串計算而成的。他是一個對應匹配表達式的權重。 如果優(yōu)先級相同，靠后的 CSS 會應用到元素上。

　　注意：元素在文檔樹中的位置是不會影響優(yōu)先級的

　　優(yōu)先級順序

　　優(yōu)先級逐級增加的選擇器列表：

　　通用選擇器(*)

　　元素(類型)選擇器

　　類選擇器

　　屬性選擇器

　　偽類

　　ID 選擇器

　　內聯(lián)樣式

　　基于類型的優(yōu)先級

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

　　有如下樣式聲明:

　　CSS Code復制內容到剪貼板

　　* #foo {

　　color: green;

　　}

　　*[id="foo"] {

　　color: purple;

　　}

　　將其應用在下面的HTML中:

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

I am a sample text.

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

　　選擇器優(yōu)先級一致

　　優(yōu)先級相同的情況下，后邊定義的會覆蓋前邊定義的

　　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;

　　}