CSS | 链接样式需要遵循LVHA顺序的原因

Posted by KazooTTT on July 23, 2021

链接样式需要遵循LVHA顺序的原因

《深入解析CSS》中有这样一句话

伪类选择器(如:hover)和属性选择器(如[type=”input”])与一个类选择器的优先级相同。通用选择器(*)和组合器(>、+、~)对优先级没有影响。

也就是说对于以下四个伪类,没有优先级之分。

如果某一个链接同时处于两个或者以上的状态,并且状态对应的样式产生了冲突,后出现的样式就会覆盖掉前面的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: red;
}

那么为什么需要遵循LVHA(link visited\hover active)顺序呢?分析如下:

:link 这两个伪类是固定的状态(:link是最原始的状态,:visited是被点击过后就产生,这两个状态产生之后是一直存在的)

:hover :active 不是固定的,需要鼠标去触发,并且触发完毕之后会消失。

所以:link作为最原始的状态,它的样式应该放在最前面,:visited紧随其后 。

而对于:hover以及:active,设想一下如果:active在:hover之前,鼠标放到链接上去的时候,直接显示:hover的颜色。点击链接的时候,由于:hover在:active下面,会覆盖active的颜色,这并不符合我们的需求,所以:active应该在:hover之后。

综上,由于伪类的优先级一致,后出现的样式会覆盖前面的样式,所以链接的样式应该遵循LVHA顺序

(方便记忆:love hate —> link visited hover active)