Question

我不知道它是否属于任何标准，但至少有两个主流浏览器已实现它：

:-webkit-any-link
:-moz-any-link

我无法找到任何相关文档。我想知道它的用途，浏览器支持和使用示例。

Answer 1

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

出于:link和:visited，WHATWG HTML和W3C HTML5的目的，两者都定义了一个“超链接”：

具有<a>属性的href元素。这排除了命名锚点（即<a>元素没有href属性，而是带有name属性），它们传统上用于标记页面中的锚点，现在已被使用取代任何元素的id属性。请参阅named anchors in 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 + 同样具体：< / p>

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

关于在this other answer of mine中使用a与a:link, a:visited与a:any-link与a[href]的比较，有一个更详尽的解释。

与CSS中具有前缀的任何其他内容一样，:-moz-any-link和:-webkit-any-link仅用于实验目的，因此您不应将其与您的网站一起使用。此外，即使你现在使用它们，你也必须自己复制规则（而不仅仅是选择器！）因为浏览器必须在无法识别的选择器上删除整个规则，使它们在现实世界的代码中变得毫无用处！

截至2013年初，我所知道的:any-link还没有其他任何实现。我不确定是否这是由相应的供应商实施，然后建议包含在Selectors 4中，或者如果它是在供应商开始实施之前初步推测的，但我认为不重要。

说到这一点，请务必不要将:-moz-any-link / :-webkit-any-link伪类与:-moz-any() / :-webkit-any()混淆，后者为specced as :matches()相反（可能是为了避免命名混淆？）。

Answer 2

在Mozilla CSS Extensions文档中，提及:-moz-any-link的注释为“（匹配：链接和：已访问）”。详细信息的链接已经死了，但是使用这样一个伪类的明显原因是关于链接的CSS的奇怪设计：:link仅匹配未访问的链接，而:visited匹配访问的链接。在复杂的情况下，使用单个选择器非常有用，否则您需要编写两个仅在一个伪类中不同的复杂选择器。

他们可以使用a[href]，除了这会将选择器绑定到用于创建链接的特定元素（和属性）（这是标记语言问题）。

使用Firebug并检查其中的链接，您将从浏览器默认样式表中看到以下样式：

*|*:-moz-any-link:not(svg|a) {
    text-decoration: underline;
}
:-moz-any-link {
    cursor: pointer;
}

后者在所有链接上设置鼠标指针（“光标”）的形状。前者使链接加下划线，除了svg元素内部。

什么是：any-link伪类？

2 个答案: