CSS：使用“ul>li”比“ul li”更快吗？

Question

使用 ">" 而不是 " " 可以加速渲染，这是我从一些人那里听到的。

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

或者

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

非常感谢！

---

更新：问题

这些中的任何一个都存在可靠性问题吗？

- designer-trying-coding

---

说真的，你的更新问题比性能问题更重要；请看我的回答，我会逐步解决这个问题。 - BoltClock

Answer 1

您应该认真考虑听取那些告诉您这种事情的人的建议。在最好的情况下，这种差异是微不足道的。没有人应该浪费时间、精力或脑力去考虑这些东西。这不是一个有用的优化。特别是对于像HTML/CSS这样的动态语言，不要陷入过早优化的陷阱。

在担心其他任何事情之前，首先编写清晰、可维护且功能性的代码。如果ul > li 看起来比 ul li 更清晰，则按照该方式编写。如果不是，请不要这样做。保持简单。

- Cody Gray

---

我现在要停止浪费时间写答案了。它会变得非常详细，所以不值得。感谢你替我填上。 - BoltClock

@Bolt：我不记得以前有比你更快回答的时候。显然你做对了什么；你的声望还比我高！ - Cody Gray

以下是有关编程的内容，请将其翻译成中文。请只返回已翻译的文本：（哦，这不是您在下面看到的已删除答案；它是另一个答案。） - BoltClock

我一直使用“ul li”的方式，这样看起来更清晰，文件中的字符也更少。我只是想知道是否应该考虑改变我的做法... - designer-trying-coding

@artmania：问题在于li元素可以包含其他的ul元素，因此你实际上可以无限嵌套它们。请参见我的答案以获取更多信息。 - BoltClock

Answer 2

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

然而，在普通大小的页面上，你永远不会注意到差异。

如果在样式表中使用子元素选择器代替后代选择器，对于非常庞大/复杂的页面，您可以节省可感知的渲染时间（请参见@Boris Zbarsky的评论）。对于普通大小的页面，您可能只能减少几毫秒。

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

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

http://ie6countdown.com/

- thirtydot

---

当然，添加一个<符号和一个额外的空格也会增加两个字符，这可能会“膨胀”您的CSS文件并“增加”加载时间。显然是一种权衡。 - Cody Gray

@Cody Gray：不用担心这个，你可以写 div>span 来避免用空格使 CSS 代码臃肿 :) - thirtydot

这真的取决于你的标记。我见过一些页面通过在选择器中使用“>”而不是空格，可以节省一两秒的渲染时间（在他们的情况下占总时间的25%）。 - Boris Zbarsky

@Boris Zbarsky：我相信你的话。我稍微修改了我的答案。 - thirtydot

@Cody Gray：老实说，在任何其他事情之前，你应该更加关注你的图片膨胀了网页的问题。一个字符等于8位，但是一个压缩不好的JPG或PNG图像可以成为150kb+的不必要的数据膨胀。 - Mark Entingh

Answer 3

哪个更快？

像Cody和thirtydot所说的，理论上使用“>”应该更快，但是即使为了性能而编写IE6样式，也不如浪费您的时间。 浏览器足够快； 相信您的浏览器，而不是那些告诉您这一点的人，特别是那些没有提供任何浏览器基准来支持其主张的人。

有任何可靠性问题吗？

当然。 除了thirtydot提到的IE6根本不支持“>”之外，还存在元素匹配方面的差异，因为“>”和空格组合器选择不同的内容：

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

哪些是选中的，哪些不是：

1. 两个选择器都选中了
   这个 span 是一个 div 的子元素，而这个 div 又是一个带有类名为 slide 的元素的子元素。由于 span 是 div 的子元素，它也是 div 的后代。同样地，div 和它的 .slide 父/祖先也是如此。

   当鼠标悬停在 .slide 元素上时，这个 span 被选中。应用的规则是第二个规则，因为两个选择器的特异性相等，但第二个规则排在第一位。

2. 只被 .slide:hover div span 选择
   这个 span 在一个 div 中，但它的父元素 div 位于另一个没有类名为 slide 的 div 中。因此，第一个选择器找不到这个元素。

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

   当鼠标悬停在 .slide 元素上时，这个 span 被选中。应用的规则是第二个规则，因为它是唯一匹配的规则。

3. 只被 .slide:hover div span 选择
   这个 span 的父元素是一个 p 元素，而不是一个 div。很容易理解；第一个选择器找不到这个元素。

   然而，span 是一个 div 元素的孙子，而这个 div 本身位于一个 .slide 中。

   当鼠标悬停在 .slide 元素上时，这个 span 被选中。应用的规则是第二个规则，因为它是唯一匹配的规则。

最后一件事：在所有三种情况下，仅第二个选择器中的规则被应用。这是纯粹的巧合；支持的浏览器在查找要匹配的元素方面的差异仍然是真实存在的。

- BoltClock

---

看到了。你对CSS的了解比我多得多。我是一个.NET/C++开发人员，只是在假装。我仍然认为我的论点是正确的，即使用<和额外的空格会使代码膨胀更多的字符，从而增加加载时间。Google担心这种事情，那么为什么不每个人都应该担心呢？:-p - Cody Gray

@Cody Gray：好的，谢谢。我只是不确定是否值得为这样一个简单的问题提供详细信息 - 不管我是否回答了正确的问题。我仍然相信你说得很对，应该获得所有5票...毕竟，就像Sayem所说的那样，KISS！ - BoltClock

事实是...浏览器CSS引擎开发人员会告诉你使用>而不是空格。但是，对于大多数用途来说，这并不重要。当您有大量规则、元素或动态更改（或任何组合）时，它开始变得重要。例如，加载HTML5单页规范的选择器匹配大约占据了25%的加载时间，其中很多原因是由于其在选择器中使用了空格。 - Boris Zbarsky