css選擇器的權值與優先規則
阿新 • • 發佈：2018-12-25
前言
在html設計當中，經常會遇到一個問題——如果對同一標籤的相同屬性設定了不同的值，那麼哪一個值是有效值呢？答案就是權值高的覆蓋掉權值的值，權值相同的採取就近原則。
什麼是權值
在css當中有多種選擇器，它們的權值是不同的，看下圖
我們把特殊性分為4個等級，每個等級代表一類選擇器，每個等級的值為其所代表的選擇器的個數乘以這一等級的權值，最後把所有等級的值相加得出選擇器的特殊值。
4個等級的定義如下：
- 第一等：代表內聯樣式，如: style=””，權值為1000。
- 第二等：代表ID選擇器，如：#content，權值為100。
- 第三等：代表偽類和屬性選擇器，如.content，權值為10。
- 第四等：代表型別選擇器和偽元素選擇器，如div p，權值為1。
例如上圖為例，其中#NAV為二等選擇器，.ACTIVE為三等選擇器，UL、LI和A為四等選擇器。則整個選擇器表示式的特殊性的值為1*100+1*10+3*1=113
注意：通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，所以他們的權值都為0。
注意：通用選擇器的權重為0，子選擇器和兄弟選擇器權重暫不做說明
就近原則
當權值相同的情況下怎麼辦呢，這個時候就要看就近原則了。
大家都知道css有4種引入方式，除了行內式以外，後設置的值會覆蓋前面設定的， 因為剩餘三種引入方式都是在頭部引入，後設置也就離目標屬性更近，也就是就近原則了。
不知道css有哪四種引入方式的童鞋可以看看CSS的四種引入方式
特殊的！important
在CSS中，通過對某一樣式宣告! important ，可以更改預設的CSS樣式優先順序規則，使該條樣式屬性宣告具有最高優先順序，也就是相當於寫在最下面。