将多个CSS选择器分组以提高加载速度
效率是成功网站的重要因素。 该网站在网上使用图片的方式应该很高效。 这将有助于确保网站对访问者表现良好，并在其设备上快速加载 。 效率也应该成为整个流程的一部分，帮助您按时按预算保持网站的进度。
最终，效率在网站创建和长期成功的所有方面发挥作用，包括为该网站的CSS表单编写的样式。 能够创建更精简，更干净的CSS文件是理想的，您可以通过将多个CSS选择器分组在一起来实现。
分组选择器
将CSS选择器分组时，可以将相同的样式应用于多个不同的元素，而无需在样式表中重复样式。 不是有两个或三个甚至更多的CSS规则，所有这些规则都做同样的事情（例如，将某些东西的颜色设置为红色），您可以使用单个CSS规则完成您的页面。
这个“选择器分组”有利于页面的原因有很多。 首先，您的样式表将更小并且加载速度更快。 无可否认，当涉及到缓慢加载网站时，样式表不是其中一个主要的罪魁祸首。 CSS文件是文本文件，所以即使是非常长的CSS页面，与未优化的图片相比，文件尺寸也很小。 尽管如此，每一个细节都很重要，如果你可以削减一定规模的CSS并以更快的速度加载页面，那总是一件好事。
一般来说，站点的平均负载速度高于3秒， 3到7秒是平均水平，7秒以上太慢了。 这些较低的数字意味着，要在您的网站上实现这些目标，您需要尽一切所能！ 这就是为什么您可以使用分组CSS选择器帮助您保持网站速度的原因。
如何分组CSS选择器
要将CSS选择器分组在样式表中，可以使用逗号分隔样式中的多个分组选择器 。 在下面的示例中，样式会影响p和div元素：
div，p {color：＃f00; }逗号基本上是指“和”。 所以这个选择器适用于所有的段落元素和所有的分割元素。 如果逗号缺失，则它将成为所有段落元素，而这些段落元素是分区的子元素。 这是一种非常不同的选择器，所以这个逗号确实改变了选择器的意义！
任何形式的选择器都可以与其他选择器分组。 在这个例子中，一个类选择器被分组为一个ID选择器：
p.red，#sub {color：＃f00; }所以这种风格适用于任何具有“red”类属性的段落，以及具有“sub”ID属性的任何元素（因为我们没有指定哪种类型）。
您可以将任意数量的选择器组合在一起，包括单个单词和复合选择器的选择器。 这个例子包括四个不同的选择器：
p，.red，#sub，div a：link {color：＃f00; }所以这个CSS规则将适用于以下内容：
- 任何段落元素
- 任何具有“红”类的元素
- 任何ID为“sub”的元素
- 作为分部的后代的锚元素的“链接”伪类。
最后一个选择器是一个复合选择器。 您可以看到它很容易与此CSS规则中的其他选择器结合使用。 通过这个规则，我们在这4个选择器上设置＃f00（红色）的颜色，这比编写4个单独的选择器来获得相同的结果更可取。
分组选择器的另一个好处是，如果您需要进行更改，您可以编辑一个CSS规则而不是多个CSS规则。 这意味着这种方法可以节省您在将来维护网站时的页面重量和时间。
任何选择器都可以分组
从上面的示例中可以看到，任何有效的选择器都可以放在一个组中，并且文档中与所有分组元素匹配的所有元素都将具有基于该样式属性的相同样式。
有些人更愿意在分开的行上列出分组元素，以便在代码中清晰易读。 网站上的外观和加载速度保持不变。 例如，您可以在一行代码中将由逗号分隔的样式组合为一个样式属性：
th，td，p.red，div＃firstred {color：red; }
或者您可以在单行上列出样式以清晰起见：
日
TD，
p.red，
DIV＃firstred
{
红色;
}
无论您使用哪种方法对多个CSS选择器进行分组，都可以加快网站的运行速度，并使其更易于长期管理样式。
Jennifer Krynin的原创文章。 由Jeremy Girard于5/8/17编辑。