为什么a:hover必须在CSS中的a:link和a:visited之后？

Question

为什么w3schools说在CSS中写anchor pseudo-类时要先写a:link然后写a:visited再写a:hover然后终于a:active有效果了？

From: https://www.w3schools.com/css/tryit.asp?filename=trycss_link

伪类的顺序如何影响有效性？

Answer 1

因为有优先顺序。

如果悬停在访问之前，那么悬停将永远不会被应用，因为它会被访问过的样式覆盖（如果它真的被访问过），然后应用。

同样适用于 :active (mouse down) - 如果它是在 hover 之前定义的，那么 hover 将始终覆盖 :active(mouse down)

有道理吗？

另一方面，这只是 "conventional rule" - 它不是强制的。如果有人想要 :visited 更高的优先级，覆盖 :hover/:active - 你可以自由地这样做 - 它只是非常规的

最后，风格优先的作用不仅仅是顺序

定义更明确的元素具有更高的优先级。 !important 的样式将比显式定义的样式具有更高的优先级。

使用 !important 并设置为最后的明确定义的样式将具有 "ultimate" 优先级。

质疑“为什么要使用这些来覆盖样式？只在 CSS 文件中正确排序样式不是更好吗？ “ - 通过更明确的定义和 !important 优先级覆盖来使用覆盖的原因在您使用大型 css/theme/bootstrap 时很方便，您还没有创建并且您必须快速 override/change 一些东西......这些脏东西覆盖作为 quick/cheap（不是很漂亮）解决方案出现。

.theBad:active {
  color: red;
}

.theBad:hover {
  color: green;
}

.theGood:hover {
  color: green;
}

.theGood:active {
  color: red;
}

<a href="#" class="theGood">the Good</a> - this will turn red on mouse down
<br />
<a href="#" class="theBad">the Bad</a> - this poor little thing will not

<!--#ordermatters, The Ugly is lurking somewhere in the shadows-->

Answer 2

来自 SitePoint

This isn’t the only useful order, nor is it in any way the “right” order. The order in which you specify your pseudo-classes will depend on the effects you want to show with different combinations of states.

为什么a:hover必须在CSS中的a:link和a:visited之后？

Why must a:hover come after a:link and a:visited in the CSS?

html

css

pseudo-class