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

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

Answer 2

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

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

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

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