布萊恩的創業小窩的部落格

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

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

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必學!前端工程師與Div.Span標籤的應用(上)

蛤?HTML繼承關係?前端工程師課程大解密

那些前端工程師不一定會告訴你的五四三,今天在這裡你有福了!

網路行銷課程還能教什麼?當然要教主關鍵字的相關詞呀!

不想被搜尋引擎搜尋到嗎? 你一定要會SEO優化的robots.txt!!

想到海外工作嗎?選擇達內教育讓你與國際接軌!

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？