什么是:any-link伪类？

Question

我不知道它是否是任何标准的一部分,但至少有两个主要的浏览器实现了它:

• :-webkit-any-link 在Chrome中
• :-moz-any-link 在Firefox中

我找不到任何文件.我想知道它的用途,浏览器支持和使用示例.

Answer 1

:any-link是选择器级别4中提出的新伪类,它匹配所有要匹配的元素:link, :visited.从我看来,它的主要目的是简化需要选择任何超链接的选择器,因为命名:link是误导性的; 它特别指的是仅限未访问的链接,而不是所有超链接(这使得它基本上与之相反:visited).

对于目的:link和:visited,WHATWG HTML和W3C HTML5都定义了"超链接"中的任何一种:

• <a>具有href属性的元素.这排除了命名锚点(即<a>没有href属性但具有name属性的元素),这些锚点传统上用于标记页面中的锚点,现在被id任何元素上的属性使用所取代.在HTML 4中查看命名锚点.

• <area>具有href属性的元素.

• 阿<link>那有一个元素href属性.

例如,考虑一种情况,页眉中的链接应与所有其他链接的颜色不同:

body > header > a:link, body > header > a:visited {
    color: white;
}

请注意,该body > header部分在两个选择器中都是重复的.这似乎是多余的,但目前需要为了使页眉中的链接与其他链接不同,但不管它们的访问状态如何.这是因为body > header > a不够具体,!important无论如何都需要使用覆盖,并且body > header > a:link麻烦地仅适用于未访问的链接.

使用:any-link伪类,您可以简单地执行此操作:

body > header > a:any-link {
    color: white;
}

特异性与每个半体的特异性完全相同,因此应该没有问题.

当然,由于没有浏览器实现它没有前缀,这是行不通的.作为替代方案,考虑到你是最有可能的HTML文档的工作,反正你也可以只使用a[href]来代替,这在所有的浏览器IE7,包括+之上的作品也具有同等具体:

body > header > a[href] {
    color: white;
}

有关于使用更加精细的解释a与a:link, a:visited对a:any-link与a[href]在我这对方的回答.

像其他任何东西,在CSS前缀,:-moz-any-link并且:-webkit-any-link仅用于实验目的的存在,所以你不应该与你的网站上使用它们.此外,即使你现在使用它们,你也必须自己复制规则(而不仅仅是选择器!)因为浏览器必须在无法识别的选择器上删除整个规则,使它们在现实世界的代码中变得毫无用处!

截至2013年初:any-link,我所知道的其他任何实现都没有.我不确定是否这是由相应的供应商实施,然后建议列入选择器4,或者如果它是在供应商开始实施之前初步确定的,但我认为这不重要.

说到这一点,一定不要把:-moz-any-link/ :-webkit-any-linkpseudo-class与:-moz-any()/ 混淆:-webkit-any(),后者被指定为:matches()(可能是为了避免命名混淆？).