Java課程是為了今日．Python課程是為了將來

前端工程師的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 設定

See the Pen .first與 .second中間無空格的例子 by Tedutw (@Tedutw) on CodePen.

3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定

See the Pen .first與 .second中間有逗號的例子 by Tedutw (@Tedutw) on CodePen.

註 : 以上三個範例的 HTML 碼都一樣

 相關閱讀:

想成為前端工程師的第一課-CSS

前端工程師的必備知識:學習HTML與CSS

前端工程師套用 CSS 樣式到 HTML 檔案上的4種方式!

用五個小學問做自己想要的CSS背景好簡單!(5)設定背景顏色

搞清楚前端工程師的字體世界!-絕對單位

SEO優化小撇步:想吸引人們目光,加上微數據就對了!

5部電影預告AI新世界!! 讓Python課程帶你與世界接軌!!