一尘不染

是否有理由在样式表中使用a而不是a:link或a:visit?

css

谁能告诉我在样式表中是否有a {}代替(或相邻)使用的理由a:link, a:visited {}?我在浏览器,网站等上测试此结果的结果不一致,所以我从来没有得出满意的答案。我也无法在Google上找到答案。

当然,这是假设 永远没有 理由使用<a>没有href值的标签。也许这是一个错误的假设。

编辑

我知道这些选择器的 作用
。我正在寻找为什么要使用a而不是a:link或的原因a:visited,因为它a始终具有href属性。但是正如克里斯·布莱克(Chris
Blake)和瑞安·普(Ryan P)在回答中说的那样,也有<a name="top">和javascript用法,两者都不需要href属性。


阅读 327

收藏
2020-05-16

共1个答案

一尘不染

当然,这是假设 永远没有 理由使用<a>没有href值的标签。也许这是一个错误的假设。

好吧,实际上…并非每个<a>元素都需要具有href属性。确实,在HTML5中仍然
不需要href为每个都指定<a>。克里斯·布雷克(ChrisBlake)和瑞安·普(RyanP)讨论了命名锚点的概念,我将补充一点,尽管HTML5以来的name属性<a>已过时,但命名锚点仍然很盛行,并且将继续存在,仅仅是继承和传统而已。

就是说, 今后 ,建议作者使用id属性而不是命名锚来指定文档锚片段。

同样,<a>缺少href属性但具有onclickJavaScript
属性的元素也一团糟。即使你坚持使用onclick绑定事件,优雅降级的缘故,你至少应该点它 的地方 使用href

但是为了简单起见,让我们假设您不会编写<a>没有href属性的元素。

考虑到这一点,回到CSS选择器,有两点需要考虑:

他们是一样的吗?

不,选择器aa:link, a:visited不是严格等效的。

选择器a应匹配任何<a>元素,而a:link仅匹配 未访问的超链接的<a>元素(HTML
4文档类型将超链接定义为具有属性的元素)。它在任何规范中均未注明应自动转换为标准,反之亦然。 __<a>``href``a``a:link

换句话说,在HTML中,a:link, a:visited(在CSS1中)严格等于a[href](在具有属性选择器的CSS2中),而不是a。请注意,只要存在,属性是否有值都没有关系[href]。还请注意,这对于所有当前的HTML标准都是如此,并且我认为其中包括HTML5,因为如上所述,href在任何现有规范中都不是必需的属性。

请记住,其他语言可能会为:link和定义完全不同的语义:visited-碰巧它们与HTML中一个同样特定的选择器重合,这将在接下来的内容中进行介绍…

特异性

这是一个巨大的疑难杂症:a小于特定比任一a:linka:visited,这是施加样式时是特别明显的特异性问题很常见的源aa:linka:visited分别。然后,这导致各种!important骇客绕开对特异性的了解。1个

幸运的是,属性选择器与伪类一样具体。这意味着您可以a[href]同时使用“ a:link和/或a:visited”和“ 或”
来表示,而不会遇到特异性问题,因为它们同样具有特异性!

例如,考虑以下CSS:

/* All unvisited links should be red */
a:link {
    color: red;
}

/* All visited links should be slightly darker */
a:visited {
    color: maroon;
}

/* But no matter what, header links must be white at all times! */
body > header > a {
    color: white;
}

这并不符合预期,因为a:linka:visited比更为具体body > header > a,因此标头链接实际上 绝不 会是白色的:

/* 1 pseudo-class, 1 type  -> specificity = (0, 1, 1) */
a:link, a:visited

/* 3 types                 -> specificity = (0, 0, 3) */
body > header > a

现在,大多数CSS编码人员想到的第一件事就是投入使用!important,完全放弃了特异性:

body > header > a {
    color: white !important;
}

但这会让您遇到各种各样的不良代表,对吗?

好吧,如果您对使用感到不舒服!important,则可以使用a[href],如上所述。

/* 1 attribute, 3 types    -> specificity = (0, 1, 3) */
body > header > a[href] {
    color: white;
}

或这样做,这会带来冗长的问题,但对较旧的浏览器更友好,并且更加直观:

/* 1 pseudo-class, 3 types -> specificity = (0, 1, 3) */
body > header > a:link, body > header > a:visited {
    color: white;
}

那么要使用哪个选择器呢?

最后,这仍然是所有主观的疯狂,但是我遵循以下个人经验法则:

  • 适用于 不依赖于链接状态的a样式(即,只要它是链接即可)。 __

  • 适用于a:linka:visited样式, 无论 是否访问链接都很重要。

  • 考虑到上面提到的特异性问题,不要混用之间的任何声明 aa:link/ a:visited规则。如果我需要将相同的属性适用于这两个州的某个地方,但我已经拥有它的独立a:linka:visited规则,写一个选择器,结合了伪类; 不要只是使用a

例如,以下是我在网站中使用的链接样式:

a {
    text-decoration: none;
    transition: text-shadow 0.1s linear;
}

a:link {
    color: rgb(119, 255, 221);
}

a:visited {
    color: rgb(68, 204, 170);
}

a:hover, a:active {
    text-shadow: 0 0 0.5em currentColor;
    outline: 0;
}

/* ... */

footer a:link, footer a:visited {
    color: rgb(71, 173, 153);
}

text-shadow过渡所有定义的a元素,不管它们是否被访问或没有,因为过渡才会生效时,其中一个位于鼠标上并点击(对应于a:hover, a:active规则)。

现在,我想访问过的链接比未访问链接略暗的阴影,所以我把颜色分开a:linka:visited规则。但是,由于某种原因,无论是否访问,我都希望页脚链接显示相同的颜色。

如果使用footer a,则会遇到上述特异性问题,因此我选择了footer a:link, footer a:visited。我可以轻松地选择它,footer a[href]因为它也可以正常工作,但是我个人更喜欢同时指定这两个伪类,因为它更直观,即使它会使选择器更长一些。


1 特殊性和重复的选择器构成了一个巨大的问题,实际上,工作组提出了下一个规范中的:any- link伪类提案,以消除必须依赖hrefHTML中的属性的问题,但这将等待很 长一段 时间才能看到曙光(谁知道那时会叫什么):

/* 1 pseudo-class, 3 types -> specificity = (0, 1, 3) */
body > header > a:any-link {
    color: white;
}
2020-05-16