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 設定

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,今天一一告訴你!

 

為什麼ID選擇器對前端工程師如此重要?原因是…

 

前端工程師的御用愛將CSS,超好用四招搞定HTML!

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

Java課程助你擠進IT專業職場大門

 

HTML5教學網路行銷必知2-怎麼利用HTML製作表格?

 

自動駕駛時代來臨!學習Python課程正是時候!

 

 

 

發佈留言

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