为元素添加新样式规则时，Chrome 生成的选择器包含整个层次结构，而不仅仅是类名。
例如：
<body>
<div class="container">
<span class="helper"></span>
</div>
</body>
为.helper 添加新的样式规则将生成类似body > div > span 的选择器，而不仅仅是.helper。这是为什么呢？
【问题讨论】：
标签： html css google-chrome css-selectors google-chrome-devtools
发生这种情况的原因有多种。在不知道所采用的确切属性的情况下，很难分辨。也看到你的CSS也会有所帮助。
据我所知，您在问为什么当您 <span class"helper"> 它同时具有其父 div 和父 body 属性。
这可能是因为它本身是body 和div 的子代
这里的另一个合乎逻辑的解释是一个工作示例 jsfiddle
根据您的元素，您可能会遇到一些冲突。在我的示例中，添加了!important 标记，使其color 属性优先于span class 但在下一行中它适用。
<body>
<div class="container">
<span class="helper">I am being applied</span>
<div>
<span class="helper">I am helper but i am not red</span>
</div>
</div>
</body>
body > div > span {
color: red !important;
}
.helper { color: green }
【讨论】：
除非我查看源代码本身，否则无法准确分析浏览器的实现。但我能说的是，浏览器需要确保您添加的样式规则仅适用于工作 DOM 中的特定元素和类，其目的是将一个 或多个 相关元素，不是很适合这个目的。
由于类的工作方式，浏览器不能假定您的类只分配给该span 元素，因为它不知道您是如何编写 HTML 的。 NichoDiaz 给出的示例说明了一个简单但有效的示例：.helper 不一定是body > div > span，因为它很可能是body > div > div > span，无论是现在还是以后。
因此，与其对 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，它将匹配两个元素，这显然不是突出显示 one 元素并添加特定元素的样式规则。
【讨论】：
.helper 规则属性以影响与规则匹配的所有元素，或者仅编辑元素的样式以影响单个元素. “新规则”按钮对于添加自定义规则而不是复制现有规则/创建单个元素规则似乎更有用。
element.style 被添加为内联样式而不是内部样式表，尽管我不确定大多数人如何将其视为问题用户。