我首先说我不知道如何通过浏览器将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类实际上是针对它),它会检查冲突并在需要时执行覆盖。
从这些集合中排除元素,通过更具体地定位它们有助于浏览器分配样式(提高性能或降低)?
如果它增加,它是否有意义,或者它是如此之少,以至于每个人都忽略它?
如果它减少了,多少和为什么?
感谢您的任何建议。
答案 0 :(得分:2)
根据this article from Mozilla Development Network,选择器越具体越好。因此,如果你不打扰有多少div变成蓝色,那么通用选择器部分div会更好。选择器链越长,浏览器就越难找到该元素,因为它需要匹配更多的东西。在这种情况下,性能最高的选项实际上会将一个名为.blue
的类分配给您想要蓝色的div。
element>element
(直接子项)选择器more performant比沙箱中的element element
(后代)选择器更强,但如果您想覆盖,可能会强制您编写更长的选择器链它在另一点上。
回答你的问题,在你的例子中(至少简单来说),整体表现可能会减少一点点(无意义)位,因为伪元素如:first-child是性能最差的选择器,你进一步拥有更长的选择链。
如果你真的问我在一个只有六行css的项目中使用哪一个,我鼓励你使用第一个例子,因为它更容易覆盖和重用。