伪类选择器的四种状态的顺序是不是这样更合理？
来源：3-20 伪类选择器
前端杨家将
2017-10-12 17:46:00
老师，按照正常交互顺序应该是：
a:link{color: green;} /*未访问状态*/
a:hover{color: blue;} /*鼠标悬浮状态*/
a:active{color: red;} /*激活状态*/
a:visited{color: gray;} /*已访问状态*/
这样才更符合交互逻辑，还是一定要按照你说的那种顺序？
写回答
1回答
-
好帮手慕糖
2017-10-12
你好，关于四种状态的循序可参考如下理解：
1、鼠标悬停（或点击）时，<a>链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。
2、hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前
3、若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。
4、link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）
祝学习愉快~
0
相似问题