为什么CSS选择器:is()不支持伪元素？

你遇到的问题本质不是:is()不支持伪元素，而是踩中了CSS选择器解析的容错边界，以及浏览器厂商私有伪元素的天生兼容限制。

• 首先，:is()本身是支持传入标准伪元素的，比如:is(div, p)::before、:is(input::-webkit-slider-runnable-track)这类写法，在支持对应伪元素的浏览器里可以正常生效。
• 你写的合并写法失效，核心原因是浏览器对私有前缀伪元素的解析容错规则：
  每个浏览器只识别自家内核对应的range滑块伪元素，对其他内核的专属伪元素会直接判定为语法非法：
  • Webkit内核（Chrome、Safari、新版Edge）只认识::-webkit-slider-runnable-track，完全不识别::-moz-range-track、::-ms-track
  • 火狐（Gecko内核）只认识::-moz-range-track，不识别另外两个
  • 旧IE/旧Edge（Trident内核）只认识::-ms-track，不识别另外两个
• 很多人误以为:is()会自动忽略非法选择器，实际上规范里定义的:is()宽容解析机制，只对「浏览器能识别语法、只是匹配不到元素」的选择器生效；如果选择器本身是浏览器根本不认识的语法（比如别家的私有伪元素），浏览器在CSS解析阶段就会直接判定整条:is()规则无效，根本不会进入样式匹配环节。
• 这也是为什么你直接用逗号分隔选择器会失效、用:is()包裹也会失效的根本原因——两种写法对浏览器来说，都包含它识别不了的非法语法片段。
• 所有涉及不同浏览器私有前缀伪元素/伪类的样式，都不能合并选择器，必须分开写，这是CSS解析规则决定的，没有投机取巧的空间。

目前没有可以合并这三个选择器的兼容写法，你最开始写的分条声明的代码，反而是跨浏览器场景下唯一可靠的实现：

input::-webkit-slider-runnable-track {
    background: #2196F3;
}
input::-moz-range-track {
    background: #2196F3;
}
input::-ms-track {
    background: #2196F3;
}

如果觉得重复写属性太冗余，可以用CSS变量抽离公共样式值，后续修改只需要调整一处：

:root {
    --range-track-bg: #2196F3;
}
input::-webkit-slider-runnable-track {
    background: var(--range-track-bg);
}
input::-moz-range-track {
    background: var(--range-track-bg);
}
input::-ms-track {
    background: var(--range-track-bg);
}

如果是用Sass、Less这类预处理器，也可以用mixin封装这段逻辑，最终编译出来的产物依然是分开的三条规则，和手写效果一致。

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