带有子选择器的高效 CSS，值得吗？答案

【问题标题】：Efficient CSS with child selectors, is it worth it?带有子选择器的高效 CSS，值得吗？
【发布时间】：2011-11-17 19:58:53
【问题描述】：

我知道：

div > p

渲染速度比

div p

但是，另一方面，它又占用了一个字符，因此增加了发送 CSS 文件的时间。

我知道速度差异很小，但如果你有一个非常大的 CSS 文件，其中包含很多选择器，它就会变得很重要。

所以，我的问题是：浪费一些时间渲染而不使用子选择器或使用子选择器并浪费更多时间发送 CSS 文件更好？

【问题讨论】：

在您实际测量它并证明它对用户来说是一个明显的障碍之前，何必费心呢？
"如果你有一个非常大的 CSS 文件，其中有很多选择器，它可能会变得很重要" 仅适用于 IE。
如果您如此担心字节（我的意思是它们只是几个字节；听起来很简单，需要 一千个请求 一个额外的字节来达到一个 kilo 字节），意识到div>p 也可以工作。没有多余的空格字符。

【解决方案1】：

Div > p 和div p 不一样

如果你有以下结构：

<div>
  <p id="p1">first p</p>
  <section>
     <p id="p2">second p</p>
  </section>
</div>

div > p 将仅适用于 p1，而div p 将适用于 p1 和 p2。

选择器的速度取决于您的 html 结构。

【讨论】：

【解决方案2】：

你应该区分从服务器加载数据和解析 HTML+CSS。

在加载时你是对的（它会更慢）

但是在渲染时你错了（它会更快）

附：不要忘记：一旦你有了 CSS - 就不会再次下载。

【讨论】：