13

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

  • :-webkit-any-link在铬
  • :-moz-any-link在火狐中

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

4

2 回答 2

19

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

出于 和 的目的:link，:visitedWHATWG HTML和W3C HTML5都将“超链接”定义为以下任何一种：

  • <a>具有href属性的元素。这不包括命名锚点（即没有属性但具有属性<a>的元素），传统上用于标记页面中的锚点，现在已被在任何元素上使用属性所取代。请参阅HTML 4 中的命名锚点。hrefnameid

  • <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关于vs a:link, a:visitedvs vs a:any-linkvs的使用有更详细的解释。a[href]

就像在 CSS 中具有前缀的其他任何东西一样，并且仅出于实验目的:-moz-any-link而:-webkit-any-link存在，因此您不应该在您的网站中使用它们。此外，即使您现在要使用它们，您也必须复制规则本身（而不仅仅是选择器！）因为浏览器必须将整个规则放在无法识别的选择器上，从而使它们在实际代码中毫无用处！

截至 2013 年初:any-link，据我所知，没有其他实现。我不确定这是否由各自的供应商实施，然后提议包含在 Selectors 4 中，或者是否在供应商开始实施之前预先指定，但我认为这并不重要。

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

于 2013-01-21T11:19:40.513 回答
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元素内部除外。

于 2013-01-21T10:58:26.757 回答