html - 为什么必须是:hover come after a:link and a:visited in the CSS?

Question

这个问题已经有答案了:

Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? (3 个回答)

已关闭 6 年前。

为什么w3schools说我们在CSS中编写 anchor 伪类时应该写a:link先然后a:visited接下来是 a:hover最后a:active有效吗？

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

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

Answer 1

因为有优先顺序。

如果悬停在访问之前，则悬停将永远不会被应用，因为它将“永远”被访问的样式覆盖(如果它确实被访问过)，这是在之后应用的。

同样适用于 :active (mouse down) - 如果它在悬停之前定义，则悬停将始终覆盖 :active(mouse down)

有道理吗？

---

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

---

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

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

使用 !important 显式定义的样式并设置为最后将具有“最终”优先级。

询问“为什么要使用这些来覆盖样式？让 CSS 文件中的样式正确排序不是更好吗？” - 通过更明确的方式使用覆盖的原因当您使用尚未创建的大型 css/主题/ Bootstrap 时，定义和 !important 优先级覆盖会很方便，并且您必须快速覆盖/更改一些内容...这些肮脏的覆盖是快速/廉价的(不是很漂亮) )解决方案。

.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-->