Html CSS在继承方面的性能

我知道ID规则比类规则快，类规则比标记规则快，标记规则比通用规则快，如上所述。我的问题与CSS在继承方面的性能有关。例如，以下哪项更有效

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 700;
}

或

虽然DOM中只有一个

标记，但可能有数百个

p.article-text

元素。由于只有一个

标记，这是否意味着

样式更有效，即使我要重新设置

元素的列表？还是对

.article text

元素进行样式设置更有效，因为这样做会使用更具体的选择器，而且我不需要担心重新设置

元素的样式

---

我一直在想这个。思想？

如史蒂文斯所述。这不值得担心。

---

此外答案确实取决于浏览器和实际给出的HTML。

我想说两个浏览器中排名靠前的可能更快，但正如每个人都说的那样，浏览器有ATM、设备和连接速度，除非你有一个超过40-50页的大型网站，否则你不会注意到有什么不同应该研究一下你的代码

我认为你展示的MDN文章是以一种有害的方式写的，因为它建议关注CSS微优化，而页面速度几乎总是可以通过不同的方式提高（例如，有有趣的提示）

我不记得在我的网站上有任何CSS是瓶颈的情况。您可能希望在某些页面上看到Chrome开发者工具中的“时间线”，并注意到，与其他事件相比，使用样式所花费的时间通常是微不足道的

---

如果我要给出建议，我宁愿选择另一种方式，使用CSS预处理工具，如or，以提高可维护性。这甚至可能最终有助于减少规则的数量。

做一个基准测试并找出答案？我想CSS的“级联”（从父元素继承样式）是非常高效的。这根本不需要选择器。我的理解是，

body

应该按照您希望文档中的纯文本主体的样式设置样式——这就是它的容器。在页面性能的总体方案中，（或者至少在您解决了许多其他因素之前不值得担心：连接、缩小等）@Thomas W：级联在CSS中有非常特殊的含义。看见层叠就是层叠，继承就是继承（虽然可以说继承是层叠的一部分）。我知道这是关于细节的，但即使是有成千上万个动态绑定的疯狂CSS表，比如

div[^=“someField”]{}#someField1314{}

现代浏览器（甚至在手机上）的速度极快。还要注意的是，一旦CSS文件被缓存，它是否有数百KB并不重要。不久前，我建立了一个繁重的CSS动画驱动网站，CSS文件加起来超过3兆字节（压缩：P）。我只使用过一次AJAX加载程序（有点像Flash剪辑）。一旦缓存，每个页面加载都是即时的：）我会为大的JavaScript块付出更多的汗水；）

h1 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 700;
}

.article-text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
}