Question

使用“＆gt;”我从少数人那里听到，而不是“”让渲染得更快？

.slide:hover > div > span {
  border-color: #c8c8c8;
}

OR

.slide:hover div span {
  border-color: #c8c8c8;
}

非常感谢！

更新：问题

任何这方面的任何可靠性问题？

Answer 1

你应该非常认真地重新考虑倾听那些告诉你这种事情的人。

best 的区别完全无关紧要。考虑到这些事情，没有人应该浪费时间，精力或智力。这不是一个有用的优化。不要陷入过早优化的陷阱，特别是对于像HTML / CSS这样的动态语言。

在担心其他任何事情之前，编写清晰，可维护且功能优先 的代码。
如果ul > li看起来比ul li更清楚，那么就这样写。如果没有，不要。保持简单。

Answer 2

.slide:hover > div > span 比.slide:hover div span更有效。

但是，您从不会注意到平均尺寸页面的差异。

如果您在样式表中的任何地方使用子选择器而不是后代选择器来获取真正令人毛骨悚然的大型/复杂页面，那么您可以减少渲染时间的显着部分（请参阅@的评论）鲍里斯Zbarsky）。对于平均大小的页面，您可能会将缩短几毫秒。

使用子选择器有一个缺点 - IE6不支持它。

对于99％的网站，IE6支持不是问题，但有些人仍然使用它：

http://ie6countdown.com/

Answer 3

哪个更快？

就像Cody和thirtydot所说的那样，理论上使用>应该更快，但即使是IE6的样式也不如浪费你的时间而不是性能造型。浏览器足够快;信任您的浏览器，而不是那些告诉您这一点的人，特别是那些不提供任何浏览器基准来支持他们的人。< / p>

任何这方面的任何可靠性问题？

不确定。除了IE6根本不支持>之外，自>以来，匹配的元素也存在差异，而空白组合者选择不同的东西：

<section class="slide">
  <div>
    <span></span>   <!-- [1] -->
    <div>
      <span></span> <!-- [2] -->
    </div>
  </div>
  <div>
    <p>
      <span></span> <!-- [3] -->
    </p>
  </div>
</section>

选择了什么，什么不是：

由两个选择器选择
此span是div的子项，它是类slide的元素的子项。由于span是div的孩子，因此它也是div的后代。同样适用于div及其.slide父/祖先。

在悬停.slide元素时，会选择此span。应用的规则是第二个，因为两个选择器具有相同的特异性，但第二个选择器排在第二位。
仅由.slide:hover div span 选择此span位于div，但其父div位于另一个 div中有班级slide。所以第一个选择器找不到这个元素。

然而，内部父div是.slide元素的孙子。无论深度如何，它仍然在某种程度上是.slide的后代（它包含在其中的某个地方）。

在悬停.slide元素时，会选择此span。应用的规则是第二个，因为它是唯一匹配的规则。
仅由.slide:hover div span 选择此span的父级是p元素，而不是div。很容易;第一个选择器找不到这个元素。

span是div元素的孙子，它本身位于.slide内。

在悬停.slide元素时，会选择此span。应用的规则是第二个，因为它是唯一匹配的规则。

最后一件事：在所有三种情况下，您都会发现仅应用第二个选择器中的规则。 这纯属巧合;支持浏览器寻找符合要素的方式的差异仍然存在。

CSS：它是否比“ul li”更快地呈现“ul＆gt; li”？

3 个答案: