阅读 940

(Ⅲ)为什么要以固定的顺序声明链接的样式? | CSS 结构和层叠

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码


🔗紧接上篇文章

4 对上篇文章中遗留问题的解答

a:link {
  color: blue;
}

a:visited {
  color: red;
}

a:hover {
  color: orange;
}

a:active {
  color: black;
}
复制代码

如上一篇文章所说:我们需要按以上顺序来声明链接样式。

通过这篇的学习,我们知道了原因:

  • 他们都有相同的权重、来源;

  • 所有这些选择器的“特定性”值都是一样的:0011;

  • 因此,顺序上与元素匹配的最后一个选择器才会胜出。

即:

  • 首先,正常情况下,a 的颜色是“蓝色”;

  • 然后,当我鼠标放上去之后,:hover 在顺序上在下边,所以变为“橙色”;

  • 接着,当我鼠标按下去时,表示我的鼠标正在这个元素上,那么 :link:hover:active 都生效,但按层叠规则,:active 在顺序上的最下边,故对以上产生覆盖,所以变成“黑色”;

  • 最后,当我点击过这个链接之后,鼠标移开后,:link:visited 生效,:visited:link 覆盖并永久生效。



后记: 本篇知识点不多,属于基础知识,需要烂熟于心。路还很长,希望收获在路上,快乐在路上。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论