CSS子项选择器与子项选择器

Question

我读到在css中使用子选择器(>)比使用子选择器()更快。例如：p > em，而不是p em。

在我看来，我在野外看到的大多数代码都没有利用这一点。

我知道在某些情况下应该使用其中之一，但总的来说，我是否应该尽可能地利用子选择器呢？或者我应该遵循似乎是惯例，主要依赖于后代选择器？

Answer 1

理论上，子选择器将比后代选择器更快，因为浏览器可以在第一级之后停止检查子节点。但是，我怀疑您从中看到的任何性能增强都是可以忽略不计的，因为浏览器首先会快速解析CSS。

正如NullUserException指出的，选择器在IE6中不起作用，所以如果你非常关心IE6，我不会用它加载你的CSS。但要记住的一件好事是，您应该非常清楚地知道在哪种情况下使用哪种方法。问问自己，“我是希望这个声明涵盖所有匹配的子代，还是希望它只涵盖直接匹配的子代？”问自己这样一个问题似乎是显而易见的，但这确实是你应该在两者之间做出选择的唯一方法。除非你是认真的，否则不要使用>。

另请参阅我的问题Is there an advantage to using very specific selectors in CSS?

另请参阅：CSS selector support per browser