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编程资料分享。

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180625A05H5200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券