Question

为元素添加新的样式规则时，Chrome生成的选择器包含整个层次结构，而不仅仅是类名。

例如：

<body>
      <div class="container">
           <span class="helper"></span>
      </div>
</body>

为.helper添加新的样式规则会生成body > div > span之类的选择器，而不仅仅是.helper。这是为什么？

Answer 1

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

由于课程的工作方式，浏览器不能假定您的课程仅分配给该span元素，因为它不知道您如何创作HTML。 NichoDiaz给出的示例说明了一个简单但有效的例子：.helper可能不一定是body > div > span，因为现在或以后它很可能是body > div > div > span。

因此，不要对helper类进行假设（即使在DOM中只有一个元素具有它），它会对元素的结构进行假设，这更加可靠。由于它发现只有一个span是div的孩子，而body是body > div > span的孩子，因此会为您所属的元素生成选择器body > ＃39;已选择添加样式规则。（据推测，它之所以以html > body >而不是body开头是因为html 总是是span的孩子，这使得约束完全冗余。）

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

如果您在第一个之前添加第二个body > div > span:nth-child(1)元素，那么您将看到浏览器生成稍微更具体的选择器{{1 }}。如果它曾尝试使用.helper而不是:nth-child(1)生成选择器，即body > div > span.helper，则会匹配两个元素，这显然不是突出显示一个元素并为特定元素添加样式规则。

Answer 2

这可能有多种原因发生。在不知道确切属性的情况下，很难说清楚。看到你的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 }

Chrome开发工具如何生成CSS选择器？

2 个答案: