Day20:小事之CSS 權重(css specificity) | css權重
在學習CSS的時候,一定會先認識什麼是htmlelement、什麼是class、什麼是id,什麼是css的inline寫法。了解基本的css之後,有一個東西一定要先了解,那就是css權重。所謂的權重就是指css的優先權,例如:相同權重但是後寫的css可以覆蓋先寫的css當兩個選擇器同時作用在一個元素,權重高的優先生效但是這些權重是怎麼計算的呢?先說一下基本的權重大小inlinestyle>ID>Class>Element>*那麼來看他們的權重吧以下的圖,最左邊的權重最高,最右邊的權重最低。*很常用到的全站預設值,為0-0-0-0,所以只要權重超過就可以覆蓋過它的...
在學習 CSS 的時候,一定會先認識什麼是 html element、什麼是 class、什麼是 id,什麼是 css 的 inline 寫法。了解基本的 css 之後,有一個東西一定要先了解,那就是 css 權重。
所謂的權重就是指 css 的優先權,例如:
相同權重但是後寫的 css 可以覆蓋先寫的 css 當兩個選擇器同時作用在一個元素,權重高的優先生效但是這些權重是怎麼計算的呢?
先說一下基本的權重大小 inline style > ID > Class > Element > * 那麼來看他們的權重吧以下的圖,最左邊的權重最高,最右邊的權重最低。
*很常用到的全站預設值,為 0-0-0-0,所以只要權重超過就可以覆蓋過它的預設。
全站預設值 *{ padding: 0 margin: 0 } Element所有的 Element 的權重都是 0-0-0-1。Element 總共有哪些呢?下面列出部分常見的,其他的請參考 MDN[1]
div, p, ul, ol, li, em, header, footer, article.... classclass 在 html 上面會寫成 class="box" ,在 css 內長這樣 .box ,前方會有一個點.
每一個 class 的權重都是 0-0-1-0。
idid 在 html 上面是這樣寫的 id="home" ,在 css 內長這樣 #home ,前方會帶井字號。
每一個 id 的權重都是 0-1-0-0。
inline style attribute所謂的 inline style attribute 就是寫在 html 行內的 style
inline style attribute 的權重為 1-0-0-0 。
<div style="color:red"> CSS ...