link 伪类的书写顺序及原理是前端重要的基础知识之一。本文首先介绍伪类,然后针对 link,结合实例说明为何 link 伪类要按顺序书写。

1. 什么是伪类

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button’s color when the user’s pointer hovers over it.

——MDN

根据文档,CSS 伪类是添加到选择器的关键字,用于指定所选元素的特殊状态。

常见的伪类有 :linked, :visited, :hover, :active 以及 :nth-child(), :nth-last-of-child(), :nth-of-type() 等等。具体含义及用法可以参考文档,在此不赘述。伪类的写法如下,在选择器后加冒号伪类名,其他的同普通的类的写法。

1
2
3
selector:pseudo-class {
property: value;
}

CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态

对于超链接而言,最常用的伪类主要有四个,分别是 :link, :visited, :hover, :active。下面我们具体解释 link 伪类的用法及书写顺序。

  1. a:link /* 未访问的链接 */

  2. a:visited /* 已访问的链接 */

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //
    // CSS 部分
    <style>
    a:link{
    color: red;
    font-size: 20px;
    }
    a:visited{
    color: blue;
    }
    </style>

    // HTML body 部分
    <body>
    <a href = "https://www.baidu.com">未访问</a>
    <br/>
    <a href = "#">访问过</a>
    </body>

    执行结果如下,最初都未访问过,点击第二个超链接,访问过的变绿,符合预期。

    例1

    注意:

    1. a:link 其中设置的字体大小属性对于访问过的链接也适用,即使 a:visited 里面修改了字体大小。为保护隐私,a:visited 只可更改非常有限的属性,例如字体颜色、边框颜色等,可在这里进一步了解。

      这儿还有一篇详尽分析 :visited 的怪异行为的文章,有兴趣可深入阅读。

  1. 以上两个伪类只适用于超链接。
  1. a:hover /* 鼠标移入链接 */

  2. a:active /*鼠标点击链接 */

    我们在上例中加入以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    a:hover{
    color:aqua;
    font-size: 25px;
    }
    a:active{
    color:yellow;
    font-size:30px;
    }

    当鼠标移入链接时,链接会变色,字体大小变为25px。同样的,点击时又会变成黄色,字体大小变为30px。

    例2

2.2 书写顺序及原因

首先,我们不得不提 CSS Specificity,直译为 CSS 特异性,你可以简单的将其理解成 CSS 选择器权值。它决定了当样式发生冲突时,哪些样式起作用。具体内容可以查看我之前写过的一篇博客《正确理解 CSS 权值(不应存在进制)》

这里我们需要知道,上述伪类权值都一样。并且一个链接可能同时处于多种状态,即同时属于多个伪类。

然后我们逐个分析:

  1. a:link 与 a:hover,当链接未被点击时,a:link 处于激活状态。当链接处于 hover 状态时,它同时具有 :link 和 :hover 状态。此时,假若 a:hover 写在 a:link 上方,那么当链接处于 hover 状态时,它的样式会其下方的 a:link{} 样式覆盖。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 例子,这里我们把 a:hover 写在 a:link 上面。
    a:hover{
    color:aqua;
    font-size: 25px;
    }

    a:link{
    color: red;
    font-size: 20px;
    }
    // body 内只有一个未访问的超链接
    <a href = "#">未访问</a>

    1

    通过测试我们看到,当鼠标移入时,颜色不会发生改变。本质上是样式被下方的 a:link 覆盖了。

  2. a:link 与 a:active,分析同上,a:active 必须在 a:link 后面。

  3. a:active 和 a:hover,当鼠标移入不点击时,链接处于 hover 状态而不处于 active 状态。而当鼠标点击时,其必定同时处于 a:active 和 a:hover 状态。 因此,a:active 应该写在 a:hover 后面。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 我们修改 CSS 样式,把 a:active 放在 a:hover 前面。 	
    a:link{
    color: red;
    font-size: 20px;
    }

    a:visited{
    color: green;
    }

    a:active{
    color:yellow;
    font-size: 30px;
    }
    a:hover{
    color:aqua;
    font-size: 25px;
    }

    2

    结果与我们的分析一致。当鼠标划入,链接文本颜色变为水色,而点击时并没有发生颜色改变。点击过后,链接处于 visited,颜色变绿,这也印证了点击确实发生了,但就是颜色没变。

  4. 最后,对于 visited 的位置。倘若放在 a:active 和 a:hover 之后,那么点击过的链接会一直处于 visited 状态,也因此会覆盖 a:active 和 a:hover 的样式。所以 a:visited 必须在它们之前。对于 a:visited 和 a:link, 因为链接不能处于已被点击又没被点击的状态,所以二者顺序没有严格要求。

请记住 Love or Hate 吧!或者你喜欢 LV HA!


写在最后:

有时一些老生常谈的东西,谷歌一下仍然能有新的收获。本文记录我学习的过程,希望能给像我一样的新人一点帮助!

这是我的邮箱,欢迎交流学习。