为元素添加新的样式规则时，Chrome生成的选择器包含整个层次结构，而不仅仅是类名。
例如：
<body>
<div class="container">
<span class="helper"></span>
</div>
</body>
为添加新的样式规则.helper将生成body > div > span而不是的选择器.helper。为什么是这样？
除非我查看源代码本身，否则不可能对浏览器的实现进行准确的分析。但是我要说的是，浏览器需要确保您添加的样式规则仅适用于工作DOM中的特定元素，而目的是将一个或多个相关元素分组的类不是很好-适合于此目的。
由于类的工作方式，浏览器无法假定您的类仅分配给该span元素，因为它不知道您如何编写HTML。NichoDiaz给出的示例说明了一个简单但有效的示例：a.helper不一定是a body > div > span，因为body > div > div > span现在或以后都可能是a 。
因此helper，与其对类进行假设（即使在DOM中只有一个元素），也可以对元素的结构进行假设，这更加可靠。由于它看到只有一个span是的子项div，而是的子项body，因此它body > div > span为您选择为其添加样式规则的元素生成选择器。（大概，之所以以body >而不是开头的原因html > body >是因为body它始终是的子元素html，这使得该附加约束完全多余。）
当然，一旦添加第二个span元素，样式规则也将应用于该元素。再次，浏览器无法预料到这一点，但是:nth-child(1)如果您不想将样式规则应用于该新元素，则可以轻松地修改规则以将其添加到选择器的末尾。
如果您在第一个span元素上创建新样式规则之前添加了第二个元素，则会看到浏览器会生成稍微更具体的选择器body > div > span:nth-child(1)。如果它尝试使用.helper和不生成选择器:nth-child(1)，即body > div > span.helper它将匹配两个元素，那么这显然不是突出显示一个元素并为该特定元素添加样式规则的预期结果。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句