本文参考自 Link Specificity

CSS Link 伪类,包括 :link, :visited, :hover, :active

我们平时写的时候,用得最多的应该是 :hover 这个伪类,将四个伪类一起写的情况可能不多。正是由于用的不多,所以,这其中的一些需要注意的地方就必须要知道,不然,将调试器杀了可能也找不到问题所在。

伪类的书写顺序

对于这四个伪类,必须要记住的就是他们的书写顺序:link-visited-hover-active 或者 visited-link-hover-active

用一种简单的方式来记忆就是 LoVe, HAte( 按照 link-visited-hover-active 的顺序的话)。只有 linkvisited 的顺序是可以互换的。

那么,如果不按照正确的书写顺序写的话,会有什么问题呢?

下面这个示例会展示正确的写法和不正确的写法之间的区别:

错误的写法

See the Pen LinkSpecificity( Bad Code) by Erichain (@Erichain) on CodePen.


正确的写法

See the Pen LinkSpecificy by Erichain (@Erichain) on CodePen.

看出区别了吗?

其实,其中的原理,仔细想想的话,很容易就能够明白。

CSS 的样式应用是按照权重来进行应用的,权重越大的样式就会被应用到元素上。当权重相同的时候,后定义的样式会覆盖先定义的样式( 当然,Sass 的替换默认值的那种方式不一样 )。所以说,如果将 :visited 或者 :link 写在 :hoveractive 的后面的话,:hoveractive 的样式就会被 :visited 或者 :link 给重写了,那么,也就永远看不到 Hover 以及 Active 的效果了。

至于 :link:visited 可以交换的原因,想一想也很简单了,一个链接的状态不可能是既被访问过又没有被访问过吧。:link 其实代表的就是链接没有被访问的状态。

:link 这个伪类,其实很多情况下貌似都不用明确写出来,可以直接使用 color 属性代替。

最后,说一下关于 :visited 这个伪类。:visited 作为一个查询用户访问历史的媒介,本身并没有什么危险性可言,但是,当与 getComputedStyle() 结合起来时,就表明别人可以通过浏览你的访问历史来得到你的一些信息。所以,对于 :visited 的样式,现代的大多数浏览器就严格限制了在这个伪类上的样式设置。查看详细信息,可以参考 privacy-related changes coming to CSS :visited