为什么CSS中的“：is（）”选择器似乎不起作用？

我不明白为什么：is选择器在我尝试的任何方式中都不起作用。它似乎没有响应，所以我必须使用这些愚蠢的选择器列表-

#top-section a:first-of-type:hover, #download-section a:first-of-type:hover,
#top-section a:last-child:hover, #download-section a:last-child:hover {
    opacity: .8;
    transition: opacity .2s ease;
}

我使用了文档中提到的语法，但不知道出了什么问题-

:is(#top-section, #download-section) a:first-of-type:hover,
:is(#top-section, #download-section) a:last-child:hover {
    opacity: .8;
    transition: opacity .2s ease;
}

---

首先，这个选择器是未来的建议，我们需要等待一段时间，直到所有主要浏览器都支持它。 目前，对于这种情况和整个CSS的清晰性和维护来说，最强大的是CSS预处理器，比如SASS

您可以使用SASS预处理器轻松地使用SCSS语法实现相同的功能。 代码如下所示：

#top-section, #download-section{
    a:first-of-type:hover, a:last-child:hover{
       opacity: .8;
       transition: opacity .2s ease;
    }
}

预处理器将为您完成所有脏活，并将此代码编译为：

#top-section a:first-of-type:hover, #top-section a:last-child:hover, #download-section a:first-of-type:hover, #download-section a:last-child:hover {
   opacity: 0.8;
   transition: opacity 0.2s ease;
}

您可以像npm install-gsas和setupfilewatcher一样简单地安装它，以便在每次更改时自动将sass编译为css

---

如果您仍然不想使用css预处理器，更干净的方法是使用类而不是id选择器。

它仍然没有支持：78分在firefox mdn浏览器兼容性方面意味着什么？这是浏览器的版本，而不是分数。如果你有FirefoxV78，那么你可以让它工作。所有其他版本都是红色的，因此不支持或部分支持。实际上，我已经使用过SASS几次了。在web开发中，这仅仅是2个月的时间，但是在使用React时，我觉得管理单独的css文件似乎比管理SCS及其相应的编译css文件要简单。有什么建议吗？如果您必须维护已编译的文件，那么项目设置肯定有问题。如果您选择使用SCS，那么您不应该为css操心，因为像webpack这样的工具可以为您完成这项工作，并将编译的所有内容都放在dist或任何目录中。我是一个有棱角的开发人员，但我认识一些使用react和SCS的人，并且根本没有听说过任何维护问题。