CSS考点之一，标签，伪类

1.2万前端开发已关注

39个好友已关注

一、标签常用的伪类概述

当有链接，且该链接未被访问过时，此伪类处于激活状态。

某个链接已经被访问过时，此伪类处于激活状态。

鼠标悬停在某个链接上时，此伪类处于激活状态，直到鼠标移开链接。

用鼠标点击链接时，此伪类激活。注意，鼠标点击后不松开，此伪类一直激活，直到松开鼠标。

二、标签伪类书写顺序详解

为什么要考虑伪类的书写顺序？

第一，CSS（Cascading Style Sheets）全称翻译为层叠样式表。有时候多条规则会定义元素的同一个属性，这时该怎么办呢？CSS用层叠的原则来考虑样式声明，从而判断相互冲突的规则中哪个规则应该起作用。首先，你编写的样式如果与浏览器的默认样式冲突，均以你编写的样式为准。在此基础上，CSS用层叠的原则来考虑特殊性（specificity）、顺序（order）和重要性（importance），从而判断相互冲突的规则中哪个规则应该起作用。不要受这些术语的影响，你只要去试，就能明白CSS决定该应用哪些样式以及何时应用这些样式的方式。[^1]

第二，由于标签的这四个伪类的特殊性是一样的，所以当某个链接处于的状态同时激活多个伪类时，那么伪类的书写顺序就起到了关键作用，从而影响最终的显示效果。这就是为什么我们要考虑伪类的书写顺序。

哪些伪类会同时激活并影响显示效果？

第一，其实和两个伪类之间顺序无所谓。因为它俩不可能同时触发，即在未访问的同时访问过。此处注意，有人将理解成只要某元素有链接存在，就会激活，这是错误的。当链接被访问过以后，就不再激活。我们做个试验。

我们把放在最后，开始时链接未访问，无论是我鼠标悬浮还是点击，颜色都不会改变，都是蓝色。当我第一次点击鼠标并松开后，颜色变成红色。然后再悬浮就会变成绿色，再点击，就会变成紫色，再松开就恢复成红色。蓝色不会再出现。此时链接依然存在，只是已经被访问过，所以伪类不再激活。

第二，从用户习惯角度考虑，无论链接访问或未访问过，都希望当鼠标悬浮在链接上时能够产生颜色变化，并且，无论链接访问或未访问过，产生的颜色变化应该是一样的。所以应该把放在和后面

记住顺序的口诀：“LoVe，HA”

[^1]: HTML5与CSS3基础教程（第8版）第七章第四节，[美] Elizabeth Castro　Bruce Hyslop　著，望以文　译。

[^2]: 引用自 链接的四个伪类顺序。

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

感谢 · 转发欢迎大家留言

Frontender -

持续关注互联网、web前端开发、IT编程资料分享。

其它功能正在完善，不定期更新....

点赞和分享是对我们最大的支持