为什么CSS中的":is() "选择器似乎无法使用？

Question

我不明白为什么 :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;
}

Answer 1

首先，这个选择器是未来的提案，我们需要等待一段时间，直到它被所有主流的浏览器支持.目前最强大的是CSS预处理器，如SASS。

你可以很容易地用SCSS语法（使用SASS预处理器）实现同样的功能。

#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 -g sass 并设置文件监视器，以便在每次修改时自动将sass编译成css。

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