:any-link 伪类有什么用？

Question

我不知道它是否是任何标准的一部分，但至少有两个主流浏览器已经实现了它：

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

我找不到任何文档。我想知道它的用途、浏览器支持和使用示例。

Answer 1

:any-link 是Selectors level 4 中提出的一个新伪类，它匹配所有将被:link, :visited 匹配的元素。据我所知，它的主要目的是简化需要选择任何超链接的选择器，因为:link 的命名具有误导性；它专门表示仅未访问的链接，而不是所有超链接（这使其本质上与 :visited 相反）。

就:link 和:visited 而言，WHATWG HTML 和W3C HTML5 都将“超链接”定义为以下任何一项：

• 具有href 属性的<a> 元素。这不包括命名锚点（即，<a> 元素没有 href 属性，而是带有 name 属性），它们传统上用于标记页面中的锚点，现在被使用 id 属性所取代在任何元素上。见named anchors in HTML 4。

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

• 具有href 属性的<link> 元素。

例如，考虑一个场景，页面标题中的链接应该与所有其他链接的颜色不同：

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] 在this other answer of mine 中的使用，有更详细的解释。

与在 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 与注释“（匹配 :link 和 :visited）”一起提及。指向详细信息的链接已失效，但使用此类伪类的明显原因是 CSS 对链接的奇怪设计：:link 仅匹配未访问的链接，而 :visited 匹配已访问的链接。在复杂情况下使用单个选择器很有用，否则您需要编写两个仅在一个伪类中不同的复杂选择器。

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

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

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

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