为什么 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 清晰度和维护）是 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 选择器。

为什么 CSS 中的“:is()”选择器似乎不起作用？

Why does ":is()" selector in CSS not seem to work?

css

css-selectors

pseudo-class