为何相同HTML结构下CSS规则未应用于复选框关联的obox伪元素？

选择器生效的严格判定规则 #

你用到的样式规则:root input + .obox:before，要完成匹配必须满足以下硬条件：

• 被选中的节点最终挂载在文档根节点下
• 存在一个<input>元素，它的紧邻下一个元素兄弟节点，是带有.obox类的span元素
• 相邻兄弟选择器+的匹配逻辑是：跳过所有文本节点、注释节点，只要两个元素之间存在任何其他元素节点（哪怕这个节点是不可见的、零尺寸的），匹配关系就会直接断裂

结构差异的本质 #

你以为两个场景下DOM结构完全一致，实际是只对比了手写的HTML源码字符串，没有对比浏览器执行脚本后生成的最终DOM树。
你页面中带oform-initialized类的表单初始化脚本，会在运行时动态改造DOM：

• 示例1的执行流程触发了脚本的原生控件包装逻辑：在原生<input>和后续的.obox span之间插入了一层额外的包裹元素，原本的<input>变成了包裹容器的子节点，和.obox不再是紧邻元素兄弟，选择器无法命中，对应样式自然不会生效
• 示例2的执行流程没有触发这段包装逻辑，<input>依然是.obox的上一个紧邻元素兄弟，选择器可以正常匹配，样式就会正常应用

快速校验方法 #

直接在浏览器控制台选中.obox元素，读取previousElementSibling属性即可验证：

• 如果返回值是对应的<input>元素，选择器就可以正常匹配
• 如果返回值是其他任意元素节点，选择器就会匹配失败，和你手写的HTML源码结构是否看起来一致没有关联

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