為什麼簡單的逗號簡化了編碼
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編輯