在 CSS 代码中用 ':is()' 替换每个 ':-moz-any()' 伪类有什么问题吗？答案

【问题标题】：Are there any issues with replacing every ':-moz-any()' pseudo-class with ':is()' in CSS code?在 CSS 代码中用 ':is()' 替换每个 ':-moz-any()' 伪类有什么问题吗？
【发布时间】：2021-01-06 12:25:44
【问题描述】：

我有一堆 CSS 选择器，其中包含 Mozilla 供应商前缀的伪类 :-moz-any。

目标受众使用最新版本的 Firefox。

由于 Firefox 现在完全支持 :is，我认为最好在 CSS 代码中将所有出现的 :-moz-any 替换为 :is。

这样做是否有任何问题（例如选择的内容被更改，或特异性发生任何变化）？

【问题讨论】：

标签： css firefox css-selectors pseudo-class

【解决方案1】：

不*，更换它应该没有问题。实际上，您可能需要重新访问每个选择器并对其进行改进：

来自 :-moz-any() selector grouping，David Baron 在 2010 年的博客文章中解释了 Firefox 的新功能：

:-moz-any() 允许包含带有多个简单选择器的选择器（使用简单选择器的 css3-selectors 定义，而不是 CSS 2.1 定义），但不允许包含组合器或伪元素。所以你可以写:-moz-any(p.warning.new, p.error, div#topnotice)或者:-moz-any(:link, :visited).external:-moz-any(:active, :focus)，但是你不能把“div p”或者“div > p”或者“:first-letter”放在:-moz-any()里面 em>。

（粗体和斜体强调我的）

您可以在此处看到 伪元素也组合器都不能与 :-moz-any() 一起使用。

但是，W3C Selectors Level 4 规范在 is() 上的条目说明如下：

matches-any 伪类，:is()，是一个以selector list 为参数的功能性伪类。它表示由其参数表示的元素。

如果您单击选择器列表链接，您会看到它链接到“简单/复合/复杂选择器列表”的说明：

简单/复合/复杂选择器列表是以逗号分隔的简单、复合或复杂选择器列表。当类型不重要或在周围散文中指定时，这也称为选择器列表；如果类型很重要且未指定，则默认为list of complex selectors。

由于is() 部分没有指定选择器列表的类型，因此我们假设它是复杂的选择器列表，正如上面引用的段落所解释的那样。该列表具体包括以下内容：

复杂选择器是一个或多个复合选择器的序列由组合器分隔。

（粗体和斜体强调我的）

所以，如您所见，我们现在应该可以将组合符与is() 一起使用。此外，它给出的唯一警告是关于伪元素。它没有说明不能使用组合器：

伪元素不能用matches-any伪类来表示；它们在:is() 内无效。

如果我们对此进行测试，我们可以看到 Firefox 确实目前在单个选择器中支持 :is() 内部和外部的组合器：

:is(div, div > p) > span { 
  color: green;
}

<h1>is():</h1>

<div>
  <span>This should be green.</span>
</div>

<div>
  <p>
    <span>This should be green too.</span>
  </p>
</div>

<div>
    <main>
        <p>
            <span>This should not be green.</span>
        </p>
    </main>
</div>

<p>
  <span>This should not be green either.</span>
</p>

因此，如果您有任何选择器可以从能够使用组合器中受益，详细程度，您现在可以使用该功能。

* - 请记住，此功能当前为 only supported in Firefox。此外，CSS 选择器级别 4 目前仅处于工作草案阶段。你应该等到它至少是Candidate Recommendation 或更高的状态，然后再在生产代码中实现它，因为工作草案中的内容可能会在没有通知的情况下发生变化（从is() 过去的事实中可以看出）被称为matches()。

【讨论】：