如何用方括号替代双冒号形式的CSS伪元素选择器？

首先明确：双冒号形式的伪元素选择器（比如::selection）无法用方括号语法实现等价效果，原因如下：

• 你之前用[focus]替代:focus的写法，本质是混淆了「伪类」和「属性选择器」：

  • :focus是伪类，选中的是处于焦点状态的元素，和元素本身有没有focus属性无关；
  • [focus]是属性选择器，选中的是带有focus全局属性的元素（比如<button focus>），只是测试场景巧合让两种选择器选中了相同元素，才产生效果一致的错觉。

• 而::selection这类双冒号伪元素，是用来选中页面中用户选中的文本片段这种DOM中不存在的虚拟元素，方括号属性选择器只能匹配真实存在的元素属性，根本无法定位到这类虚拟伪元素，所以不存在对应的方括号替代写法。

内容的提问来源于stack exchange，提问作者Marcos Favarão