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;

}

相信大家已經學會CSS中的的優先級了吧!感謝大家對我們網站的支持!

相關推薦：

css中單位的區別是什麼