有没有理由在我的样式表中使用a而不是:link或a:visit？

Question

任何人都可以告诉我是否有任何理由在我的样式表中使用a {}而不是(或相邻)a:link, a:visited {}？我在浏览器,网站等方面测试结果不一致,所以我从来没有得到满意的答案.我也无法在Google上找到答案.

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

**编辑**

我知道这些选择器做了什么.我正在寻找为什么我会使用a而不是a:link或a:visited因为a总是有一个href属性的原因.但正如Chris Blake和Ryan P在答案中所说,还有<a name="top">javascript用法,这两者都不需要这个href属性.

Answer 1

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

嗯,实际上......并非每个<a>元素都需要具有href属性.实际上,HTML5中仍然不需要href为每个人指定<a>.Chris Blake和Ryan P谈论命名锚点的概念,我将补充说,虽然name属性<a>已经在HTML5中被淘汰,但命名锚点仍然很普遍,并且将继续存在,仅仅是传统和传统.

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

此外,<a>缺少href属性但具有onclickJavaScript 属性的元素是一团糟.即使你坚持使用onclick绑定事件,优雅降级的缘故,你至少应该把它指向的地方使用href.

但为了简单起见,我们假设你不会在<a>没有href属性的情况下编写元素.

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

它们是一样的吗？

不,选择a并a:link, a:visited不能完全等同.我将引用我之前关于这个主题的回答:

选择器a应匹配任何<a>元素,而a:link仅匹配未访问的超链接<a>元素(HTML 4文档类型将超链接定义为具有属性的元素).它在任何规范中都没有说明应该自动转换为或反之亦然.<a>hrefaa:link

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

只要记住,其他语言可以定义完全不同的语义:link和:visited-它只是恰巧,他们与HTML同样特定的选择,下面要提到一致...

特异性

这是一个巨大的疑难杂症:a是比任何特定的较少a:link或a:visited,这是施加样式时是特别明显的特异性问题很常见的源a,a:link和a:visited分别.这导致各种各样的!important黑客无法理解特异性.¹

幸运的是,属性选择器与伪类一样具体.这意味着你可以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:link并且a: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:link和访问链接是否被访问无关紧要的a:visited样式.

• 考虑到上面提到的特殊性问题,不要在两个 a和a:link/ a:visited规则之间混合任何声明.如果我需要将相同的属性适用于这两个州的某个地方,但我已经拥有它的独立a:link和a: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:link和a:visited规则.但是,出于某种原因,我希望页脚链接显示相同的颜色,无论它们是否被访问过.

如果我使用footer a,我会遇到上面描述的特异性问题,所以我选择了footer a:link, footer a:visited.我可以轻松地使用,footer a[href]因为它同样适用,但我个人更喜欢指定两个伪类,因为它更直观,即使它使选择器更长一点.

¹ _{事实上,特殊性和重复选择器已经提出了如此巨大的问题,工作组已经在下一个规范中提出了:any-link伪类的建议,以免不得不依赖href于HTML中的属性,但这将有在看到光明之前要等很长时间(谁知道那时会被叫到什么):}

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