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