CSS或层叠样式表是Web设计行业为网站添加视觉样式的可接受方式。使用CSS，您可以控制页面布局，颜色，排版，背景图像等等。基本上，如果它是一种视觉风格，那么CSS就是将这些风格带入您网站的方式。
在向文档添加CSS样式时，您可能会注意到文档开始变得越来越长。即使只有少量页面的小型网站最终也会有一个相当大的CSS文件 - 而且一个包含大量独特内容页面的大型网站可能会有非常大的CSS文件。响应式网站在样式表中包含大量媒体查询，以改变视觉效果的外观和页面为不同的屏幕布局。
是的，CSS文件可能会变得冗长。在网站性能和下载速度方面，这不是一个主要问题，因为即使是冗长的CSS文件也可能非常小（因为它实际上只是一个文本文档）。尽管如此，在页面速度方面，每一点都很重要，所以如果你能让你的样式表变得更精简，那么这是一个好主意。这就是“逗号”在你的样式表中非常方便的地方！
逗号和CSS
您可能想知道逗号在CSS选择器语法中扮演的角色。在句子中，逗号为分隔符带来了清晰度 - 而不是代码。 CSS选择器中的逗号分隔相同样式中的多个选择器。
例如，让我们看看下面的一些CSS。
th {颜色：红色; }td {color：red; }p.red {color：red; }div＃firstred {color：red; }
使用这种语法，你说的是你想要的 日 标签， TD 标签，红色类的段落标签，以及首先使用ID的div标签，使样式颜色为红色。
这是完全可以接受的CSS，但以这种方式编写它有两个明显的缺点：
- 将来，如果您决定将这些属性的字体颜色更改为蓝色，则必须在样式表中进行四次更改。
- 它为您不需要的样式表添加了许多额外的字符。这四种风格可能看起来不过分，但如果你在整个样式表中继续这样做，那么这些线条就会加起来，而且这张纸将比它需要的大得多。
为了避免这些缺点，并简化您的CSS文件，我们将尝试使用逗号。
使用逗号分隔选择器
您可以通过用逗号分隔各个选择器，而不是编写4个单独的CSS选择器和4个规则，将所有这些样式组合成一个规则属性。以下是如何做到的：
th，td，p.red，div＃firstred {color：red; }
逗号字符基本上充当选择器内的单词“and”。所以这适用于tH 标签和TD 标签和带有红色类的段落标签和带有标识的标签的div标签。这正是我们之前所拥有的，但我们不需要4个CSS规则，而是有一个包含多个选择器的规则。这是逗号在选择器中的作用，它允许我们在一个规则中有多个选择器。
这种方法不仅可以制作更精简，更清晰的CSS文件，而且还可以使未来的更新变得更加容易。现在，如果您想将颜色从红色更改为蓝色，您只需要在一个位置进行更改，而不是在我们原来的4种样式规则中进行更改！考虑整个CSS文件中的这些时间节省，您可以看到这将如何在长长的符文中节省您的时间和空间！
语法变体
有些人选择通过将每个选择器分离在自己的行上来使CSS更清晰，而不是像上面那样将它们全部写在一行上。这是如何做到的：
日TD，p.red，DIV＃firstred{红色;}
请注意，在每个选择器后面放置一个逗号，然后使用“enter”将下一个选择器分成它自己的行。您不要在最终选择器后添加逗号。
通过在选择器之间使用逗号，您可以创建一个更紧凑的样式表，将来更容易更新，今天更容易阅读！
Jennifer Krynin的原创文章。 Jeremy Girard于5/8/17编辑
