CSS或层叠样式表是web设计行业为网站添加视觉样式的公认方式。使用CSS，您可以控制页面布局、颜色、排版、背景图像等。基本上，如果它是一种视觉样式，那么CSS就是将这些样式带到您的网站的方法。

当您向文档添加CSS样式时，您可能会注意到文档开始变得越来越长。即使是一个只有少量页面的小站点也可能最终得到一个相当大的CSS文件，而一个拥有大量独特内容页面的非常大的站点也可能有非常大的CSS文件。此外，响应式网站在样式表中包含大量媒体查询，以改变不同屏幕的视觉效果和页面布局。

是的，CSS文件可能会变得很长。当涉及到站点性能和下载速度时，这不是一个主要问题，因为即使是一个很长的CSS文件也可能非常小（因为它实际上只是一个文本文档）。尽管如此，当涉及到页面速度时，每一点都很重要，所以如果你能使你的样式表更精简，这是一个好主意。这就是“逗号”在样式表中非常方便的地方！

逗号和css

您可能想知道逗号在CSS选择器语法中扮演什么角色。在句子中，逗号给分隔符带来的是清晰，而不是代码。CSS选择器中的逗号分隔相同样式中的多个选择器。

例如，让我们看看下面的一些CSS。

使用这种语法，您的意思是希望th标记、td标记、类为红色的段落标记和ID为firstred的div标记的样式颜色都为红色。

这是完全可以接受的CSS，但以这种方式编写它有两个明显的缺点：

• 将来，如果您决定将这些属性的字体颜色更改为蓝色，则必须在样式表中进行四次更改。
• 它在样式表中添加了许多您不需要的额外字符。这4种样式可能看起来并不过分，但如果你在整个样式表中继续这样做，行数就会增加，并且该样式表将比需要的大得多。

为了避免这些缺点，并简化CSS文件，我们将尝试使用逗号。

使用逗号分隔选择器

不必编写4个单独的CSS选择器和4个规则，您可以通过用逗号分隔各个选择器，将所有这些样式组合成一个规则属性。以下是如何做到这一点：

逗号字符基本上充当选择器中的“或”字。因此，这适用于th标记、td标记或带有类red的段落标记，或带有ID firstred的div标记。这正是我们以前所拥有的，但是我们不需要4个CSS规则，而是有一个带有多个选择器的规则。这就是逗号在选择器中的作用，它允许我们在一个规则中有多个选择器。

这种方法不仅使CSS文件更精简、更干净，而且使将来的更新更加容易。现在，如果您想将颜色从红色更改为蓝色，您只需在一个位置进行更改，而不是跨越我们原来的4种样式规则！考虑一下在整个CSS文件中节省的时间，您可以看到从长远来看这将如何为您节省时间和空间！

句法变异

有些人选择将每个选择器分隔在自己的行上，而不是像上面那样全部写在一行上，从而使CSS更清晰。这是如何做到的：

请注意，在每个选择器后面放置一个逗号，然后使用“enter”将下一个选择器打断到它自己的行上。在最后一个选择器后不添加逗号。

通过在选择器之间使用逗号，您可以创建一个更紧凑的样式表，将来更容易更新，今天更容易阅读！