【CSS】为什么a标签的伪类选择器要注意书写顺序?

【CSS】为什么a标签的伪类选择器要注意书写顺序?_第1张图片
微信订阅号:Rabbit_svip



标签相关的伪类有很多,但最常见(也是初学者最先接触到)的有以下4个。

  1. :link
  2. :visited
  3. :hover
  4. :active


它们的大概作用分别如下(详细作用以后逐一探讨,这次的主题主要和css的优先级有关)

a:link

选取用户未访问的标签,而且鼠标没有悬停在其上。

a:visited

选取已被访问过的标签。

a:hover

选取鼠标悬停在其上的标签。

a:active

选取用户正在点击的标签。

大多数前端开发者在刚接触css时,和标签有关的伪类选择器(也有的教材称之为“动态伪类选择器”)是以上4个。除了学习到以上4个伪类选择器的作用外,通常还会学到一个口诀(“LoVe/HAte”,也就是“爱/恨”。也可能是别的记忆口诀),以此来帮助记忆使用顺序。

那么到底为什么一定要按照这个顺序来写呢(如果都需要在这些场景下使用不同样式的话)?

要弄清楚这个顺序,首先要熟悉css优先级的规则。从上面的写法来看,都是由一个元素选择器和一个伪类选择器组成,所以优先级都是相同的。

因此也延伸出另一个知识点:浏览器如何处理冲突的样式?

浏览器遵循三个步骤:来源优先级源码顺序

这里假设来源相同,又因为优先级相同(上面已经说了),所以最后浏览器考虑的是源码顺序

所以在开发的时候也要从使用的角度来思考。

其实 a:linka:visited 这两个谁写在前面都没关系。

因为 a:hover 的作用是鼠标经过才生效,所以 a:linka:visited 必须写在 a:hover 前面。

a:active 的作用是点击时才生效,而点击之前鼠标是必须放到标签上的,所以在触发 a:active 之前,肯定先触发 a:hover 。如果 a:active 写在 a:hover 前面,那么无论怎么点击,都只会触发 a:hover 的效果。因为它们优先级相同,所以浏览器采用源码顺序的规则。

由于“LoVe/HAte”比较有记忆点,所以现在默认都是用 a:link -> a:visited -> a:hover -> a:active 这个顺序。

你可能感兴趣的:(【CSS】为什么a标签的伪类选择器要注意书写顺序?)