允许使用伪元素进行选择器解析

Question

有没有一种方法可以使用像 :is 或 :where 这样的宽容选择器以及仅使用本机 CSS 的 ::pseudo-element ？文档说 :is 不能与伪元素一起使用，但可能还有另一种我还无法捕获的解决方案？

具体来说，我尽量避免冗余代码，就像这个例子一样：

[type="color"]::-webkit-color-swatch{
    border:none;
    border-radius:50%;
}
[type="color"]::-moz-color-swatch{
    border:none;
    border-radius:50%;
}

这样的东西固然很棒，但确实行不通：

[type="color"]:is(::-webkit-color-swatch,::-moz-color-swatch){
    border:none;
    border-radius:50%;
}

谢谢，祝你有美好的一天！ :)

Answer 1

您可以在此处使用原生 CSS 嵌套：

[type="color"] {
  &::-webkit-color-swatch,
  &::-moz-color-swatch{
    border:none;
    border-radius:50%;
  }
}

这些是支持此功能的浏览器，如果这对您来说足够好，那么您可以使用它。

否则，您始终可以使用 SCSS 并生成基于 CSS 的内容。