根据html生成css工具,html – Chrome开发工具如何生成CSS选择器？

除非我查看源代码本身,否则无法对浏览器的实现进行精确分析.但我可以说,浏览器需要确保您添加的样式规则仅适用于工作DOM中的特定元素,而目的是将一个或多个相关元素分组的类不是很好 – 适合这个目的.

由于类的工作方式,浏览器不能假定您的类仅分配给该span元素,因为它不知道您如何编写HTML. NichoDiaz给出的例子说明了一个简单但有效的例子：a .helper可能不一定是一个身体> div>跨度,因为它很可能是一个身体> div> div>相反,无论是现在还是以后.

因此,不要对辅助类进行假设(即使在DOM中只有一个元素具有它),它会对元素的结构进行假设,这样更可靠.因为它看到只有一个跨度是作为身体子的div的子节点,所以它生成选择器主体> div>您选择添加样式规则的元素的span. (据推测,它以body>而不是html> body>开头的原因是因为body总是html的子元素,这使得额外的约束完全是多余的.)

当然,一旦添加了第二个span元素,样式规则也将应用于该元素.浏览器再次无法预料到这一点,但如果您不希望样式规则应用于该新元素,则可以轻松修改规则以将：nth-​​child(1)添加到选择器的末尾.

如果在第一个创建新样式规则之前添加第二个span元素,您将看到浏览器生成稍微更具体的选择器,body> div>跨度：第n个孩子(1).如果它曾尝试使用.helper生成选择器而不是：nth-​​child(1),即body> div> span.helper,它将匹配两个元素,这显然不是突出显示一个元素并为该特定元素添加样式规则的预期结果.