可以在 `:where()` 或 `:is()` 伪类函数中使用复杂的选择器吗？

Question

我正在使用JS的

querySelectorAll()

来获取一些元素。以下选择器按我想要的方式工作：

main > div, main > section, main > ul > li

。

我想删除其中的

main > 

冗余部分。以下对我有用：

main > :where(div, section), main > ul > li

。

但是，我不知道如何让

ul > li

复杂的选择器部分在 :where() 函数中工作。它只是被忽略了。

div

和

section

被拾取，就像

forgiving-selector-list

应该的那样。 据我所知，

div, section, ul > li

是一个有效的选择器列表。

但是，在我的研究中，我只看到

:where()

或

:is()

与简单选择器（也许是复合选择器）的使用。我错过了什么？

如果重要的话，我使用的是 Firefox 117.0.1

此代码片段使用单独的选择器工作：

---

main > div,
main > section,
main > ul > li {
    color: red;
}

<main>

   <div>Div</div>
   
   <section>Section</section>
   
   <ul>
    <li>List item 1</li>
    <li>List item 2</li>
   </ul>

</main>

此代码片段使用

---

:where()

代表

div, section

:

main > :where(div, section),
main > ul > li {
    color: red;
}

<main>

   <div>Div</div>
   
   <section>Section</section>
   
   <ul>
    <li>List item 1</li>
    <li>List item 2</li>
   </ul>

</main>

此片段

---

不起作用

使用:where()作为

div, section

和

ul > li

：

main > :where(div, section, ul > li) {
    color: red;
}

<main>

   <div>Div</div>
   
   <section>Section</section>
   
   <ul>
    <li>List item 1</li>
    <li>List item 2</li>
   </ul>

</main>

Answer 1

complex-selector

与 :where() 和

:is()

无关 - 或者与使用 forgiving-selector-list 与它们有关；问题是main > :where(ul > li)

无法满足

。 CSS 选择器级别 4 的当前（草案）规范，

将

:where() 定义为与

:is()

相同，但特异性为零

，所以让我们来看看 

:is()：

https://drafts.csswg.org/selectors/#matches

[

:is()

] 伪类匹配与列表中任何选择器匹配的任何元素。

...因此，

main > :where(ul > li)

匹配同时满足：

 的元素

是

main

•  的直系子代
  

  是
li

• 也

  ul

   的直接子级
  

  但是一个元素不能是两个不同父元素的直接子元素。
• 因此选择器无法满足。

---

我想删除其中的

main >

冗余部分。以下对我有用：

main > :where(div, section),
main > ul > li

这里的问题是

你认为那是你应该做的

。我在您的选择器中没有看到任何“冗余”。虽然这表面上看起来违反了DRY，但我认为事实并非如此。