用CSS代码中的'：is'替换每个'：-moz-any'伪类是否有问题？

如何解决用CSS代码中的'：is'替换每个'：-moz-any'伪类是否有问题？

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

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

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

执行此操作时是否有任何问题（例如，选择的内容被更改或特异性上的任何更改）？

解决方法

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

David Baron在2010年的博客文章:-moz-any() selector grouping中解释了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() 中。

（强调粗体和斜体的人）

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

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

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

如果点击选择器列表链接，您将看到它的链接，其中包含“简单/复合/复杂选择器列表”的说明：

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

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

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

（强调粗体和斜体的人）

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

伪元素不能由matchs-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或更高的状态，然后才能在生产代码中实现它，因为工作草案中的内容可能会有所更改，而不会引起任何通知（您可以从{{1 }}以前称为is()。