:hover{}為什么要在下面？

a連接常用的偽類選擇器有四種，根據(jù)CSS文檔的推薦，這四個選擇器最好按如下方式排列：

a:link{color:red}
a:visited{color:green}
a:hover{color:blue}
a:active{color:yellow}

可以記憶為LoVe,HAte（愛恨交織啊！）
原因如下：這四種選擇器的權(quán)重是一樣的，當(dāng)他們同時滿足條件時，下面的會覆蓋掉上面的。
按照CSS2推薦的順序我們來分析一下：初始狀態(tài)的a連接毫無疑問應(yīng)用:link{}的樣式，當(dāng)鏈接被訪問后選中:visited{}中的樣式，:link{}中的樣式失效，我們再次把鼠標(biāo)移到鏈接上時觸發(fā):hover{}中的樣式。注意此時:visited{}中的樣式并沒有失效，而是因為:hover{}和:visited{}中的樣式同時生效，但是:hover{}中的樣式在下面，把:visited{}中的樣式覆蓋掉了。此時，我們按下鼠標(biāo)同時觸發(fā):visited{},:hover{},:actived{},位于最下面的:actived{}就會覆蓋上面的兩個樣式，這正是我們想要的效果。

換一種情況，我們把:hover{}放最上面：

a:hover{color:blue}
a:link{color:red}
a:visited{color:green}
a:active{color:yellow}

由于一個a標(biāo)簽不是:link{}狀態(tài)，就是:visited{}狀態(tài)，這兩個狀態(tài)必然有一個是激活的，而他們都位于:hover{}下面，總有一個會覆蓋掉:hover{}的，所以:hover{}就失效了。這就是:hover{}為什么要放在:link{}和:visited{}下面的原因。

另一種情況

a:link{color:red;background:pink}
a:visited{color:green}
a:hover{color:blue}
a:active{color:yellow}

a標(biāo)簽初始化為紅字、粉背景，當(dāng)鼠標(biāo)放在a標(biāo)簽上不點擊時，此時字的顏色變成藍色，任然是粉背景。出現(xiàn)這種情況的原因是：:link{},和:hover{}同時被激活，兩者都有color屬性，瀏覽器只能選一個，就選了位于下方的:hover{}中的color:blue，但是只有:link{}中有background所以只能用它的。但是如果:hover{}中也設(shè)置了background而且不是粉色，那么瀏覽器會選擇:hover{}中的背景色。

:visited{}潛規(guī)則

a:link{color:red;}
a:visited{color:green;background:pink}
a:hover{color:blue}
a:active{color:yellow}

這一次我們把實驗對象換成:visited{}。我們驚奇的發(fā)現(xiàn)，當(dāng)我們點擊鏈接觸發(fā):visited{}選擇器，鏈接只有顏色變成了綠色，背景色并沒有任何改變。這個問題需要引起注意。
于是排除干擾因素，我們只留下:visited{}，再實驗：

a:visited{color:green;background:pink}

Paste_Image.png

開發(fā)者工具中背景色是生效的，可是頁面顯示結(jié)果就是沒有背景色。

迫不得已，召喚方方大神。大神果然是大神，瞬間搞定了。

a{backgound:#fff}
a:visited{color:green;background:pink}

點擊鏈接前：

Paste_Image.png

點擊鏈接后：

Paste_Image.png

故事并沒有結(jié)束，當(dāng)我想測試這種方法對其它屬性是否有效時：

a{backgound:#fff;font-size:30px;}
a:visited{color:green;background:pink;font-size:50px;}

然而，無效。 但是其它3個偽類選擇器并沒有發(fā)現(xiàn)此現(xiàn)象。
該現(xiàn)象原因不清楚，有待進一步考證……

MDN上對于visited的解釋

Paste_Image.png

翻譯如下（自己翻譯的，有錯誤還請指正）：
注意：出于隱私原因，瀏覽器嚴格的限制應(yīng)用于:visited偽類選擇器中的樣式：只有color,background-color,border-color,border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color以及填色和描邊可用。同時也要注意，透明度屬性也會被忽視：取而代之的是沒有被訪問時元素的透明度值（除非透明度是0，這種情況下顏色會被忽視，還是會用未被訪問狀態(tài)的顏色）。
雖然color屬性是可以改變的，但是getComputedStyle方法仍然會說謊，并返回沒有被訪問時的顏色值。
更多的關(guān)于:visited選擇器的限制以及目的的信息請看隱私和:visited選擇器

這么一看，恍然大悟了，原來人家是出于隱私考慮，故意限制了visited可以使用的樣式。具體為什么限制了樣式后會保護隱私，那就只能看它的推薦文章了。

總結(jié)

1. :hover{}選擇器要放在:link和:visited的下面才能生效；
2. 權(quán)重相同的選擇器，出現(xiàn)在樣式表下面的會覆蓋掉上面的的樣式，前提是它們都作用到同一個元素的同一種屬性；
3. 出于隱私問題，:visited{}選擇器只能使用部分和顏色有關(guān)的樣式。