多个类选择器或单个 :not() 的 CSS 性能是否更好？答案

【问题标题】：Is CSS performance better for several class selectors or a single :not()?多个类选择器或单个 :not() 的 CSS 性能是否更好？
【发布时间】：2017-06-22 14:23:34
【问题描述】：

我想知道如果使用多个类选择器或使用:not() 的单个类选择器，在性能方面有什么更好的做法。

举个例子（这过于简单化了）：

div.caseB,
div.caseC,
div.caseD,
div.caseE,
div.caseF,
div.caseG
{ color: red; }

（其中 div 将始终有一个类 caseA...caseG）。

或者：

div:not(.caseA)
{ color: red; }

【问题讨论】：

可以忽略不计。除非您谈论数以万计的课程，否则我看不出这对性能有任何可衡量的影响。我会更多地关注代码维护、简单性和可读性。
...虽然如果您谈论的是数以万计的课程，答案是单个 :not() 在带宽上要少得多。 @Michael_B
@BoltClock，在这两种情况下，更简单、更易于阅读、更易于维护:-)

标签： css performance css-selectors

【解决方案1】：

我相信这里最好的情况是添加一个新的类 .red 来赋予红色。

使用 :not(caseA)is 。不实用。就好像你有 100 个类一样，除了 .caseA 之外的所有东西都是红色的。

如果您有类 caseA/B/C/...，则应仅创建它们以区分它们。

记住DRY

否则，如果除了caseA之外的所有东西都是红色的，你可以这样做。

body{color:red}
.caseA{color:green} // other color.

【讨论】：