时间戳

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

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

问题描述

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

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

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

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

标签： cssfirefoxcss-selectorspseudo-class

解决方案

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

来自:-moz-any() 选择器分组，David Baron 的 2010 年博客文章解释了 Firefox 中的新功能：

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

（粗体和斜体强调我的）

您可以在这里看到伪元素和组合器都不能与:-moz-any().

但是，W3C 选择器级别 4规范的条目is()说明如下：

match-any 伪类 ,是一个以选择器列表为参数:is()的功能性伪类。它表示由其参数表示的元素。

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

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

由于该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>

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

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

推荐阅读