如何仅用原生CSS结合伪元素使用容错选择器:is/:where？

首先明确：当前CSS标准中，:is()/:where()确实不能直接将伪元素作为其选择器列表的成员，这也是你尝试[type="color"]:is(::-webkit-color-swatch,::-moz-color-swatch)无效的原因——伪元素必须紧跟在目标元素选择器之后，不能嵌套进:is()内部，浏览器会直接判定这类写法为无效选择器。

针对你想避免重复代码、同时兼容不同浏览器前缀伪元素的需求，有两个可行的原生CSS方案：

方案一：用:where()包裹完整的带前缀选择器组 #

利用:where()的容错特性——只要选择器列表中存在至少一个浏览器能识别的有效选择器，整个规则就不会被丢弃，完美解决了“合并选择器后因不识别前缀导致整组失效”的问题。示例代码：

:where([type="color"]::-webkit-color-swatch, [type="color"]::-moz-color-swatch) {
  border: none;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

这个写法等价于分开写两个选择器，但代码更简洁，且不会出现浏览器因无法识别某一个前缀伪元素而忽略全部样式的情况。

方案二：结合@supports做特性检测（适用于需差异化样式的场景） #

如果需要针对不同浏览器的伪元素设置细微差异样式，可以用@supports selector()来检测浏览器是否支持特定前缀的伪元素，再单独编写样式：

/* 通用基础样式 */
[type="color"]::-webkit-color-swatch,
[type="color"]::-moz-color-swatch {
  border: none;
}

/* 仅在支持webkit伪元素的浏览器中生效 */
@supports selector(::-webkit-color-swatch) {
  [type="color"]::-webkit-color-swatch {
    box-shadow: 0 0 0 1px #e0e0e0;
  }
}

/* 仅在支持moz伪元素的浏览器中生效 */
@supports selector(::-moz-color-swatch) {
  [type="color"]::-moz-color-swatch {
    box-shadow: 0 0 0 1px #f0f0f0;
  }
}

内容的提问来源于stack exchange，提问作者Alex