我读到在CSS中使用子选择器（>）比后代选择器（）更快。例如：p > em 与 p em。
但我发现大部分代码都没有利用这一点。
我知道某些情况下需要使用其中之一，但一般情况下，我应该尽可能地使用子选择器吗？还是应该遵循惯例，主要依赖后代选择器？
1个回答
11
理论上，子选择器会比后代选择器更快，因为浏览器可以在第一层后停止检查子节点。然而，我怀疑你从中看到的任何性能提升都将是微不足道的，因为浏览器首先会快速解析 CSS。
正如 NullUserException 指出的那样，该选择器在 IE6 中不起作用，因此如果您非常关心 IE6，则不应使用该选择器加载您的 CSS。但需要记住的一件好事是，您应该非常清楚地知道在哪种情况下使用哪种选择器。问问自己，“我想让这个声明覆盖所有匹配的子元素，还是只想让它覆盖直接匹配的子元素？”这似乎很明显，但这确实是您应该在两者之间选择的唯一方法。除非您的意思是这样做，请不要使用
另请参见我的问题 Is there an advantage to using very specific selectors in CSS? 另请参见：CSS selector support per browser
正如 NullUserException 指出的那样，该选择器在 IE6 中不起作用，因此如果您非常关心 IE6，则不应使用该选择器加载您的 CSS。但需要记住的一件好事是，您应该非常清楚地知道在哪种情况下使用哪种选择器。问问自己，“我想让这个声明覆盖所有匹配的子元素，还是只想让它覆盖直接匹配的子元素？”这似乎很明显，但这确实是您应该在两者之间选择的唯一方法。除非您的意思是这样做，请不要使用
>。另请参见我的问题 Is there an advantage to using very specific selectors in CSS? 另请参见：CSS selector support per browser
- Josh Leitzel
3
1我实际上已经将我的答案全部删除了，因为你已经覆盖了IE6部分的内容。 - NullUserException
谢谢大家！有趣的是，我甚至没有意识到IE6的问题。虽然我并不感到惊讶。这完全解释了为什么我在实际应用中看不到很多">"。 - Zach Lysobey
根据https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS，CSS选择器是自下而上匹配的。 - chesscov77
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接