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

Question

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

htmlcssgoogle-chromecss-selectorsgoogle-chrome-devtools

4

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

例如：

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

为.helper添加新的样式规则将生成一个选择器，如body > div > span而不仅仅是.helper。这是为什么呢？

- Roee Yossef

我也注意到了这一点——虽然我还没有深入挖掘来试图弄清楚它。 - Chad

我也想知道这个答案。 - Mike Furlender

你是说当你跨度时，它会采用 body 和父 div 的样式属性吗？ - wuno

2个回答

0

这可能有多种原因。如果不知道正在采取的确切属性，则很难确定。此外，查看您的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 }

- wuno

我相信OP指的是Chrome DevTools元素面板中的“新样式规则”按钮，而不是CSS继承。 - Fabrício Matté

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

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

由于类的工作方式，浏览器无法假设您的类仅分配给该元素，因为它不知道您如何编写HTML。 NichoDiaz所示例的示例很简单，但也是有效的: .helper可能并不一定是body > div > span，因为它也可能是body > div > div > span，无论是现在还是以后。

因此，它不是假设helper类（即使在您的DOM中只有一个元素具有该类），而是假设元素结构，这更可靠。由于它看到只有一个span是body的子节点的div的子节点，因此它会生成选择器body > div > span，用于为您选择的元素添加样式规则。（大概率上，它以body >开头而不是html > body >，是因为body始终是html的子节点，因此这个额外的约束完全冗余。）

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

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