別小看CSS相似的名稱,除前端工程師,看完這篇你也能一眼見分別

別小看CSS相似的名稱,除前端工程師,看完這篇你也能一眼見分別

別小看CSS相似的名稱,除前端工程師,看完這篇你也能一眼見分別
別小看CSS相似的名稱,除前端工程師,看完這篇你也能一眼見分別

如果你是前端工程師,但還不會分辨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 碼都一樣

 

 

延伸閱讀:

如何成為前端工程師?現在帶你細探究竟!

學會了”盒子模型”,想當前端工程師還怕什麼?(上)

學會了”盒子模型”,想當前端工程師還怕什麼?(下)

免驚!只要上了Python課程,就不怕被機器人搶飯碗

把文字通俗化,你也是網路行銷課程高手

台灣小學生也要學AI人工智慧?相關科普知識將成課程內容!

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料