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

Question

以下 :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>

Answer 1

Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is(). ^ref

Answer 2

遗憾的是，它不是当前规范的一部分，但仍不清楚/未解决。

除了 Temani 从当前 CSS Selectors Level 4 Editors Draft（2021 年 7 月 2 日）规范中引用的内容外，引用的相同规范还指出这是 3.6.3. Pseudo-classing Pseudo-elements 中的一个未解决问题。

ISSUE 3 Clarify that :not() and :is() can be used when containing above-mentioned pseudos.

祈祷这在未来的草案或最终规范中得到解决。

我打算 post 通过以下测试回答同样的问题。

: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 not working for pseudo-elements

html

css

css-selectors