多重class中空格與逗號該怎麼用?聽前端工程師建議準沒錯!

只要聽專業的前端工程師分析,其實很快就能區別三種CSS選擇器!

有時在 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 碼都一樣





更多閱讀:
自從會了ID選擇器,朝專業的前端工程師又更進一步!

想成為專業的前端工程師?千萬別錯過這篇CSS教學!

五分鐘搞好CSS跟HTML的關係,簡單到前端工程師做夢也會笑!

達內教育開幕　培養台灣IT人才進入全球企業

單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺

人工智慧養蝦提高存活率!! 產量倍增蝦隻美,養蝦人家笑哈哈~

網路行銷課程裡,最不容忽略的絕對是來自鄉民的力量!