Html 是否合并CSS选择器/速度？

我正在尝试第一次绘制，并研究浏览器在理解CSS方面有多有效

就文件大小而言，我不太关心哪一个更小，但什么处理得更快？例如，合并选择器或将它们分开：

代码A：

a { font-family: serif; font-size: 16px; background:#fff; }
p { font-family: serif; color: #333; background:#fff; }
h2 { font-family: arial; color: #333; font-size: 16px; background:#fff; }

代码B：

a, p, h2 { background:#fff; }
a, p { font-family: serif; }
a, h2 { font-size: 16px; }
p, h2 { color: #333; }
h2 { font-family: arial; }

代码C： 我可以将所有内容拆分为单个css样式，并使用HTML

background-fff { background:#fff; }
family-serif { font-family: serif; }
size-16 { font-size: 16px; }
color-333 { color: #333; }

<a class="background-fff family-serif size-16 color-333"></a>

background fff{background:#fff；}
系列衬线{字体系列：衬线；}
size-16{font-size:16px；}
color-333{color:#333；}

从技术上讲，它是完全相同的输出，第二个输出明显更小，但是，浏览器渲染和处理它是否更快

我问这个问题的原因是，如果我查看我的整个网站的CSS，并为每一个有边距的东西做第二个选择：0；例如，用逗号分隔的选择器列表将是巨大的

这意味着，对于一个链接，它将从不同的地方提取所有样式。如果我有30个与链接关联的样式，浏览器会从我的工作表中的30个不同位置提取每个样式吗？所以在我看来，这似乎会慢一些

B更小，但B处理得更快吗

---

C看起来有点傻。

使用浏览器的开发工具来评测站点。在调整这些选择器之前，您可能需要先优化100件其他事情。使用浏览器的开发人员工具来评测您的网站。在调整这些选择器之前，您可能需要先优化100件其他事情。