Chrome开发工具如何生成CSS选择器？ [英] How does Chrome dev tools generate CSS selectors?
问题描述
当为元素添加新的样式规则时，Chrome生成的选择器包含整个层次结构，而不仅仅是类名。
例如：
< body>
< div class =container>
< span class =helper>< / span>
< / div>
< / body>
为 .helper添加新样式规则将生成一个选择器 body> div> span 而不是 .helper 。为什么是这样？
除非我查看源代码本身，否则无法准确分析浏览器的实现。但我可以说，浏览器需要确保您添加的样式规则只适用于工作DOM中的特定元素，以及类，它的目的是将一个或更多相关
由于类的工作方式，浏览器不能假设你的类只分配给 span 元素，因为它不知道如何创建您的HTML。 NichoDiaz给出的例子说明了一个简单但有效的例子：a .helper 可能不一定是 body> div> span ，因为它很可能是一个 body> div> div>
而不是对帮助器做假设 class（即使在你的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）生成一个选择器， c $ c> body> div> span.helper ，它会匹配这两个元素，这显然不是突出显示一个元素的预期结果，并为该特定元素添加样式规则。 When adding a new style rule for an element, the selector that Chrome generates contains the entire hierarchy instead of just the class name.
For example:
<body>
<div class="container">
<span class="helper"></span>
</div>
</body>
Adding a new style rule for .helper will generate a selector like body > div > span instead of just .helper. Why is this?
It's not possible to give an exact analysis of a browser's implementation unless I look at the source itself. But what I can say is that the browser needs to ensure that the style rule that you add will only apply to that specific element in the working DOM, and classes, whose purpose is to group one or more related elements, are not very well-suited for this purpose.
Because of how classes work, the browser can't assume that your class is only assigned to that span element, because it doesn't know how you author your HTML. The example given by NichoDiaz illustrates a simple but valid example of this: a .helper may not necessarily be a body > div > span, because it could very well be a body > div > div > span instead, either now or later.
So instead of making that assumption about the helper class (even though in your DOM only one element has it), it makes an assumption about the structure of your elements instead, which is far more reliable. Since it sees that there is only one span that is a child of a div that is a child of body, it generates the selector body > div > span for the element for which you've chosen to add a style rule. (Presumably, the reason why it starts with body > instead of html > body > is because body is always a child of html, which makes that additional constraint totally redundant.)
Of course, once you add a second span element, the style rule will apply to that element as well. Again the browser cannot anticipate this, but you can easily modify the rule to add :nth-child(1) to the end of the selector if you don't want the style rule applying to that new element.
If you add the second span element before creating a new style rule on the first, you'll see that the browser generates a slightly more specific selector, body > div > span:nth-child(1). If it had tried to generate a selector using .helper and not :nth-child(1), i.e. body > div > span.helper, it would match both elements, which is clearly not the intended result of highlighting one element and adding a style rule for that specific element.
这篇关于Chrome开发工具如何生成CSS选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
