`:is()` 不适用于伪元素答案

【问题标题】：`:is()` is not working for pseudo-elements`:is()` 不适用于伪元素
【发布时间】：2021-07-31 10:22:02
【问题描述】：

下面的:is() 用法不适用于伪元素，有人可以解释一下吗？

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test</title>
    <link rel="stylesheet" href="https://unpkg.com/normalize.css" />
    <style>
      body {
        background: #000;
        color: #eee;
      }
      button::before {
        content: 'foo';
      }
      /* ???? not working */
      :is(button::before) {
        content: none;
      }
      /* ???? not working either */
      button:is(::before) {
        content: none;
      }
    </style>
  </head>
  <body>
    <button>Test</button>
  </body>
</html>

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

不幸的是，它不是当前规范的一部分，尽管仍不清楚/未解决。

除了 Temani 在当前 CSS 选择器 4 级编辑器草案（2021 年 7 月 2 日）规范中的引用之外，引用的同一规范在 3.6.3. Pseudo-classing Pseudo-elements 中指出这是一个未解决的问题。

ISSUE 3 明确 :not() 和 :is() 在包含上述伪时可以使用。

这个问题在未来的草案或最终规范中得到解决。

我打算通过以下测试发布相同的问题。

:is(div, h1)::before {
  content: 'Before - ';
}
:is(div, h1)::after {
  content: ' - After';
}
div:is(::before, ::after),
h1:is(::before, ::after),
:is(div, h1):is(::before, ::after),
:is(div, h1):is(::before),
:is(div, h1):is(::after) {
  content: 'None of these selectors work in Chrome 91 nor in Firefox 91. The :is() pseudo-class doesn\'t work with pseudo element selectors - 16 July 2021 - August Boehm.';
}

/* Select the h1 text to see what works */
h1::selection {
  background: red; 
} 
h1:is(::selection) {
  background: green;
}

/* What is frustrating is that these work */
input:is(:hover, :focus) {
  background: lightblue;
}

<div>div</div>
<h1>h1</h1>
<br>
<input type="text" placeholder="Input">

https://codepen.io/augustography/pen/OJmprzq

【讨论】：

我认为您链接的问题与该问题无关。他们只是缺少一个部分来澄清一些伪类如何与 :is() 一起使用（就像你发现的那样），但它明确提到伪元素在:is() 中无效，这不会改变，因为它确实如此'将它们放在:is() 中是没有意义的。如果它是伪元素，则不能选择和元素（没有元素可以是伪元素）。只有伪元素才是伪元素

【解决方案2】：

伪元素不能用matches-any伪类来表示；它们在 :is() 中无效。 ^ref

【讨论】：