:any-link

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元免费积分!

CSS 中的 :any-link 伪类提供了一种选择作为超链接源锚点的元素的方法。

如果术语“源锚点”让你迷糊,它只是 HTML 元素 <a><link><area> 上的 href 属性的别称。(为什么你需要在 CSS 中定位 <area><link> 超出我的理解范围,但嘿。)HTML 规范 还有更多关于这方面的信息。

接受并包含 href 属性的元素是超链接,并且将使用 :any-link 进行选择。这成为选择所有基于链接的 HTML 元素的便捷方法,这些元素可能看起来不相关且没有接触标记。也许它的存在是因为你可能认为 :link 会选择所有链接,但它会错过 :visited,所以这将它们全部包在一起。

从功能上讲,它就像属性选择器 [href]

<a href="/link/to/thing">Howdy!</a>
:any-link {
  color: red;
  font-weight: 900;
  text-decoration: none;
}

值得注意的是,我们也可以使用 :matches() 伪类选择相同的 HTML 元素。例如,:matches(:link, :visited) 将选择与 :any-link 相同的元素。

需要注意的另一件事是,在撰写本文时,规范目前正在要求为该选择器提供替代名称建议。虽然尚不清楚名称是否会更改,但 :matches() 伪类以前被称为 :any(),这可能是一个迹象。

浏览器支持

:any-link 伪元素被认为是实验性功能,并且是当前处于工作草案状态的选择器级别 4 规范的一部分。

为了获得完全支持,您需要使用带有前缀的它

:-webkit-any-link {
}

:-moz-any-link {
}

:any-link {
}

请记住不要用逗号分隔这些选择器以组合它们,因为浏览器会丢弃它们不理解的部分的选择器。

此浏览器支持数据来自 Caniuse,其中有更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
15*3*796.1*

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271274.4*6.0-6.1*

更多信息