Question

我首先说我不知道如何通过浏览器将css规则分配给DOM元素，所以我的问题更多地围绕着它，但我想知道这在我遇到的这种特殊情况下，所以我使用它使我的好奇心正常化：

我有一个像这样的HTML代码段：

<section>
 <div>I'd like to be blue</div>
 <div style="color:green">I am quite <p style="font-weight: bold">self confident</p> about my styles</div>
 <p>I'd like to be biig</p>
</section>

div的文本内容试图描述我的要求：第一个div必须是蓝色，第二个我不在乎，因为我可能会使用继承的属性，或者我会设置通过js或其他什么。 p应为粗体，

所以我想分配样式来做到这一点，我做这样的事情：

section div {
 color: blue;
}

section p {
 font-weight: bold;
}

这显然可以按预期工作。但是，CSS具有很好的功能来定位更具体的元素。所以我可以做同样的事情：

section > div:first-child {
 color: blue;
}

section > p {
 font-weight: bold;
}

这将仅影响作为该部分的直接子节点的元素，并且仅影响该集合的第一个div，以便我将具有相同的结果，但更具体地选择元素。我想知道这是否有助于浏览器将css规则分配给元素。我认为在某种程度上，浏览器会检查每个DOM元素css的目标规则，如果找到匹配（css类实际上是针对它），它会检查冲突并在需要时执行覆盖。

从这些集合中排除元素，通过更具体地定位它们有助于浏览器分配样式（提高性能或降低）？

如果它增加，它是否有意义，或者它是如此之少，以至于每个人都忽略它？

如果它减少了，多少和为什么？

感谢您的任何建议。

Answer 1

根据this article from Mozilla Development Network，选择器越具体越好。因此，如果你不打扰有多少div变成蓝色，那么通用选择器部分div会更好。选择器链越长，浏览器就越难找到该元素，因为它需要匹配更多的东西。在这种情况下，性能最高的选项实际上会将一个名为.blue的类分配给您想要蓝色的div。

element>element（直接子项）选择器more performant比沙箱中的element element（后代）选择器更强，但如果您想覆盖，可能会强制您编写更长的选择器链它在另一点上。

回答你的问题，在你的例子中（至少简单来说），整体表现可能会减少一点点（无意义）位，因为伪元素如：first-child是性能最差的选择器，你进一步拥有更长的选择链。

如果你真的问我在一个只有六行css的项目中使用哪一个，我鼓励你使用第一个例子，因为它更容易覆盖和重用。

是否使用伪元素，如：first-child或：last-child

1 个答案: