一、CSS選擇器的執(zhí)行順序

今天刷黃玄大神的微博看到一個(gè)題目，覺(jué)得很有意思，僅作記錄用。

How well do you know CSS.jpg

經(jīng)過(guò)我的實(shí)驗(yàn)，的確兩個(gè)都是顯示藍(lán)色。

理由：CSS最終顯示的效果是根據(jù)CSS文件定義的順序來(lái)決定，而不是使用的順序。

二、權(quán)重計(jì)算

CSS的選擇器有很多種，而最終某個(gè)樣式的值只能取其中一個(gè)，所以必然存在優(yōu)先級(jí)和覆蓋。

權(quán)重，簡(jiǎn)單地說(shuō)就是為了便于我們計(jì)算優(yōu)先級(jí)，給每種選擇器賦予的一個(gè)值，權(quán)重值可以疊加計(jì)算，值越大優(yōu)先級(jí)越高。

1、元素選擇器和偽元素（權(quán)重值為1）

div{
  color:red;
}
div::after{
  color:red;
}

2、類選擇器、屬性選擇器和偽類（權(quán)重值為10）

.box{
  color:red;
}
a[href^="#"]{
  color:red;
}
.box:hover{
  cursor:pointer;
}

3、ID選擇器（權(quán)重值為100）

#box{
  color:red;
}

4、內(nèi)聯(lián)樣式（權(quán)重值為1000）

<div style="width:300px;height:400px;"></div>

5、!important
!important權(quán)重值最高，由于它會(huì)破壞樣式表中的級(jí)聯(lián)規(guī)則，增加調(diào)試的難度，所以在平時(shí)開發(fā)中應(yīng)盡量避免使用。

注 <a>標(biāo)簽的四個(gè)偽類（:link、:hover 、:active、:visited）的優(yōu)先級(jí)是一樣的，所以寫到后面的會(huì)覆蓋前面的值。為了避免出現(xiàn)類似情況，需要遵循這樣一個(gè)順序：:link、:visited 、:hover、:active，簡(jiǎn)稱LVHA。