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

我首先说我不知道如何通过浏览器将CSS规则分配给DOM元素，以便我的问题更多地围绕它，但是我得到了在这种特殊的情况下，我钻进知道这一点，所以我用它正式我的好奇心：是否使用伪元素：first-child或last-child

我有一个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必须是蓝色的，第二个我不在乎，因为我可能会使用继承的属性，或者我会设置throu嗯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类实际上是以它为目标的），它会检查冲突并根据需要执行覆盖。

将排除该集合中的元素，通过更具体地定位它们来帮助浏览器分配样式（提高性能或降低）？

如果它增加了，它是有意义的还是很少让每个人都忽略它？

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

感谢您的任何建议。

来源

2016-03-09 Morrisda

CSS选择器的全部用途是针对特定元素。更具体的选择器覆盖其他规则与较不特定的选择器。 “第一个孩子”选择器是另一个缩小目标元素组的选择器。 –

我明白这一点，但它会影响浏览器的性能（当它将风格分配给dom元素时）？ @JacobGray – Morrisda

这篇文章（和它的底部链接的演示文稿）可能会让你感兴趣，尽管它已经有几年的历史了http://calendar.perfplanet.com/2011/css-selector-performance-has-改变为更好/ –

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

element>element（直接子）选择器是more performant比在沙箱中的element element（下降）选择器，但如果你想在另一个点覆盖它，可能会迫使你写一个更长的选择器链。因为像下面这样的伪元素：第一个孩子是性能最差的选择器，并且你更进一步地（或者说），所以在你的例子中（至少简单地说），整体性能可能会下降一点（毫无意义）有一个更长的选择器链。

如果你真的问过我在哪个项目中使用了多于6行的css，我鼓励你使用第一个例子，因为它更容易被覆盖和重用。

来源

2016-03-09 21:16:39

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

回答

相关问题