html - 是否使用像 :first-child or :last-child 这样的伪元素

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(descendand)选择器要强，但如果您想在另一点覆盖它，可能会迫使您编写更长的选择器链。

为了回答您的问题，在您的示例中(至少简而言之)，整体性能可能会下降一点点(无意义)，因为像 :first-child 这样的伪元素是性能最低的选择器，而且您还有更长的选择器链。

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