带有子选择器的高效 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。

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

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

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