a:link a:visited a:hover a:active 样式顺序

a:link{color:yellow;} /* 未访问的链接 */
a:visited {color:black;} /* 已访问的链接 */
a:hover{color:red;} /* 鼠标划过链接 */
a:active{color:green;} /* 已选中的链接 */

在CSS定义中:

a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的
a:active 必须被置于 a:hover 之后,才是有效的

如果我们将hover放在link是的上面,有意思的事情发生了,hover失效了!(淡定)

这里写图片描述

为什么呢?因为当鼠标经过未访问的链接,会同时拥有a:link、a:hover两种属性,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义。

如果我们将hover放在visited是的上面,更有意思的事情发生了,hover还是失效了!(淡定,没有我们想的那么神奇~)

这里写图片描述

因为当鼠标经过已经访问过的链接,会同时拥有a:visited、a:hover两种属性,a:visited离它最近,所以它优先满足a:visited,而放弃a:hover的重复定义。

究其原因,是css的就近原则“惹的祸”。

总结:在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,使我们的每一个CSS语句都起到效果。

一个老外盆友总结了“爱恨原则 LV/HA”,便于记忆。
(Link,Visited,Hover,Active)
实际上,link和visited的位置互换是不会有影响的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章