谁能告诉我在样式表中是否有a {}代替(或相邻)使用的理由a:link, a:visited {}?我在浏览器,网站等上测试此结果的结果不一致,所以我从来没有得出满意的答案。我也无法在Google上找到答案。
a {}
a:link, a:visited {}
当然,这是假设 永远没有 理由使用<a>没有href值的标签。也许这是一个错误的假设。
<a>
href
编辑
我知道这些选择器的 作用 。我正在寻找为什么要使用a而不是a:link或的原因a:visited,因为它a始终具有href属性。但是正如克里斯·布莱克(Chris Blake)和瑞安·普(Ryan P)在回答中说的那样,也有<a name="top">和javascript用法,两者都不需要href属性。
a
a:link
a:visited
<a name="top">
好吧,实际上…并非每个<a>元素都需要具有href属性。确实,在HTML5中仍然 不需要href为每个都指定<a>。克里斯·布雷克(ChrisBlake)和瑞安·普(RyanP)讨论了命名锚点的概念,我将补充一点,尽管HTML5以来的name属性<a>已过时,但命名锚点仍然很盛行,并且将继续存在,仅仅是继承和传统而已。
name
就是说, 今后 ,建议作者使用id属性而不是命名锚来指定文档锚片段。
id
同样,<a>缺少href属性但具有onclickJavaScript 属性的元素也一团糟。即使你坚持使用onclick绑定事件,优雅降级的缘故,你至少应该点它 的地方 使用href。
onclick
但是为了简单起见,让我们假设您不会编写<a>没有href属性的元素。
考虑到这一点,回到CSS选择器,有两点需要考虑:
不,选择器a和a:link, a:visited不是严格等效的。
a:link, a:visited
选择器a应匹配任何<a>元素,而a:link仅匹配 未访问的超链接的<a>元素(HTML 4文档类型将超链接定义为具有属性的元素)。它在任何规范中均未注明应自动转换为标准,反之亦然。 __<a>``href``a``a:link
<a>``href``a``a:link
换句话说,在HTML中,a:link, a:visited(在CSS1中)严格等于a[href](在具有属性选择器的CSS2中),而不是a。请注意,只要存在,属性是否有值都没有关系[href]。还请注意,这对于所有当前的HTML标准都是如此,并且我认为其中包括HTML5,因为如上所述,href在任何现有规范中都不是必需的属性。
a[href]
[href]
请记住,其他语言可能会为:link和定义完全不同的语义:visited-碰巧它们与HTML中一个同样特定的选择器重合,这将在接下来的内容中进行介绍…
:link
:visited
这是一个巨大的疑难杂症:a小于特定比任一a:link或a:visited,这是施加样式时是特别明显的特异性问题很常见的源a,a:link和a:visited分别。然后,这导致各种!important骇客绕开对特异性的了解。1个
!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,因此标头链接实际上 绝不 会是白色的:
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规则)。
text-shadow
a:hover, a:active
现在,我想访问过的链接比未访问链接略暗的阴影,所以我把颜色分开a:link和a:visited规则。但是,由于某种原因,无论是否访问,我都希望页脚链接显示相同的颜色。
如果使用footer a,则会遇到上述特异性问题,因此我选择了footer a:link, footer a:visited。我可以轻松地选择它,footer a[href]因为它也可以正常工作,但是我个人更喜欢同时指定这两个伪类,因为它更直观,即使它会使选择器更长一些。
footer a
footer a:link, footer a:visited
footer a[href]
1 特殊性和重复的选择器构成了一个巨大的问题,实际上,工作组提出了下一个规范中的:any- link伪类提案,以消除必须依赖hrefHTML中的属性的问题,但这将等待很 长一段 时间才能看到曙光(谁知道那时会叫什么):
:any- link
/* 1 pseudo-class, 3 types -> specificity = (0, 1, 3) */ body > header > a:any-link { color: white; }