CSS子元素vs子元素选择器 [英] CSS child vs descendent selector

问题描述

我读到使用css中的子选择器（> ）比后代选择器（ ）更快。例如： p> em ，而不是 p em 。

I read that using the child selector (>) in css is faster than the descendant selector (). For example: p > em as opposed to p em.

在我看来，我在野外看到的大部分代码都没有利用这个。

It seems to me that the majority of code I see in the wild does not take advantage of this.

我明白某些情况下应该使用一个或另一个，但一般来说，我应该努力利用儿童选择器尽可能？

I understand that certain circumstances would merit the use of one or the other, but in general, Should I be striving to take advantage of the child selector whenever possible? Or should I follow what seems to be convention and rely mostly on the descendent selector?

推荐答案

理论上，子选择器将比后代选择器，因为浏览器可以停止检查第一级后的子节点。然而，我怀疑从这里看到的任何性能增强将是可以忽略的浏览器解析CSS的速度第一。

Theoretically the child selector will be faster than the descendant selector because the browser can stop checking child nodes after the first level. However, I suspect that any performance enhancement you see from this will be negligible as browsers parse CSS quickly in the first place.

如NullUserException指出，选择器不工作在IE6，所以如果你关心IE6我不会加载你的CSS它。但是一个好的事情要记住，你应该有一个非常清楚的想法，在哪种情况下使用。问问自己，我想让这份声明覆盖所有匹配的儿童，或者我希望它只覆盖匹配的儿童吗？问自己这样一个问题似乎很明显，但它确实是你应该在两者之间选择的唯一方法。不要使用> 。

As NullUserException pointed out, the selector doesn't work in IE6, so if you care much about IE6 I wouldn't load your CSS with it. But a good thing to keep in mind is that you should have a very clear idea of which to use in which situation. Ask yourself, "do I want this declaration to cover all matching children, or do I want it to cover only direct matching children?" It may seem obvious to ask yourself such a question, but it really is the only way you should choose between the two. Don't use > unless you mean it.

另见我的问题在CSS中使用非常具体的选择器有优势吗？

另请参阅： CSS选择器支持每个浏览器

这篇关于CSS子元素vs子元素选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！