有儿童选择器的高效CSS，值得吗？

Question

我知道：

div > p

渲染速度比

快

div p

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

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

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

Answer 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结构。

Answer 2

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

在你正确的加载时间（它将会更慢）

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

P.S。不要忘记：一旦你有CSS - 它将不会再次下载。