css - 有一个长的 CSS 选择器不好吗？

Question

是一个选择器

.a, .b, .c, .d, .e, .f, .g, .h, ......... , .zzzzz {font-size:16px}

对性能不利？如果是，如何，如果不是，为什么？

我在 Google 上搜索并阅读了很多帖子，包括 Mozilla 的帖子，但没有发现任何提到将大量类名作为选择器是不好的。

score 7 · Accepted Answer

不，这里没有性能问题。

不好的是一个涉及许多检查的长选择器，但您的选择器实际上是一个选择器序列，相当于

 .a {font-size:16px}
 .b {font-size:16px}
  ...

只有一个类的选择器是最有效的选择器之一。

没有真正的问题，即使您可能应该拥有更少的类以便更轻松地管理您的代码。

score 2 · Accepted Answer

2

这是一次将公共属性分配给多个类的有效语法。没有副作用。

于 2013-01-25T09:54:39.340 回答

score 2 · Accepted Answer

节省一口是好的。是的，正如@dystroy 所说，它不会对您的页面性能产生太大影响，但它不是一个好的编码粒子，而且很难管理您的代码。

像这样写：

body{font-size:16px}

score 0 · Accepted Answer

你没有选择一个大的选择器，你只是为你的样式表分配了很多选择器。一个大的选择器将是例如：

header nav ul li a

由于浏览器从右到左使用选择器，因此键选择器（行中的最后一个选择器，在本例中为锚元素 a）过于笼统。当开始渲染样式时，浏览器开始根据键选择器抓取所有元素，这可能意味着它获得了更多元素，有效地需要。在此示例中，如果导航项获得唯一的类会更好，因此样式表只能应用于以下选择器：

.primary-link

因此，它为您的样式导入了正确的键选择器，以将渲染时间减少到最低限度。

如果您想阅读有关 CSS 选择器和性能的有趣内容，我可以推荐该页面：http ://learn.shayhowe.com/advanced-html-css/performance-organization

4 回答 4