Question

为什么w3schools说当我们在CSS中编写锚伪类时，我们应首先编写a:link然后a:visited后跟a:hover，最后a:active才能生效？

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

伪类的顺序如何影响效果？

Answer 1

因为有优先顺序。

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

同样如下：激活（鼠标按下） - 如果在悬停之前定义它，则悬停将始终覆盖：激活（鼠标按下）

有道理吗？

另一方面，这只是＆＃34;传统规则＆＃34; - 它不是强迫的。如果有人想拥有：访问更高的优先级，覆盖：悬停/：活跃 - 您可以自由地这样做 - 它只是非常规

最后，不仅是扮演风格优先的角色。

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

使用!important明确定义的样式并设置为最后将具有＆＃34;终极＆＃34;优先级。

要问及＆＃34; 为什么要使用这些来覆盖样式？将CSS文件中的样式正确排序会不会更好？＆＃34; - 通过更明确的定义使用覆盖的原因和！重要的优先级覆盖在您使用大型css / theme / bootstrap时很方便，您还没有创建并且必须快速覆盖/更改某些内容...这些脏的覆盖快来/便宜（不太漂亮）的解决方案。

＆＃13;

.theBad:active {
  color: red;
}

.theBad:hover {
  color: green;
}

.theGood:hover {
  color: green;
}

.theGood:active {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 2

来自SitePoint

这不是唯一有用的订单，也不是任何“正确”的订单。指定伪类的顺序取决于要用不同状态组合显示的效果。

为什么必须a：hover来自：链接和a：访问CSS？

2 个答案: