這一篇前端工程師知識站要來教大家分辨CSS設定中出現兩個以上CLASS的時候可能會有甚麼表現~
有時在 HTML 中， 前端工程師會對同一個標籤給予兩個以上的 Class 名稱，如以下所示:
<div class="first second"></div>
對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會表示如以下三種。你分辨得出這些 CSS 有什麼不同呢?
/*1. 兩個 class 中有空格*/
.first .second
/*2. 兩個 class 中沒有空格*/
.first.second
/*3. 兩個 class 中出現逗號*/
.first,.second
對於 CSS 的前端工程師初學者來說，上面所說的三種 CSS 因為長得非常像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 分別講解如下:
1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊才會顯示黑底白字的 CSS 設定
2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱一定要同時出現 first 和 second 才會顯示黑底白字的 CSS 設定
3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定
註 : 以上三個範例的 HTML 碼都一樣
其他閱讀
前端工程師知識站:CSS中常見的邊框屬性解釋