對於新手前端工程師來說,時常被以下的例子搞得一個頭兩個大,這篇幫你一次解決!

 

對於新手前端工程師來說,時常被以下的例子搞得一個頭兩個大,這篇幫你一次解決!

 

 

有時在 HTML 中,我們會對同一個標籤給予兩個以上的 Class 名稱,也就是多重class,如以下所示:

<div class="first second"></div>

對於這類有兩個以上的 Class 名稱的 HTML,其 CSS 選擇器可能會表示如以下三種。你分辨得出這些 CSS 有什麼不同嗎?

/*1. 兩個 class 中有空格*/  
.first .second
/*2. 兩個 class 中沒有空格*/
.first.second 
/*3. 兩個 class 中出現逗號*/  
.first,.second

對於 前端工程師的初學者來說,上述三種 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 碼都一樣

 

 

 

✌推薦閱讀:

 

讓前端工程師少一個Bug, CSS的字體單位解釋(上)-絕對單位篇

 

讓前端工程師少一個Bug, CSS的字體單位解釋(下)-相對單位篇

 

前端工程師必學的課程-CSS的border屬性解釋

 

網路行銷課程第七篇:找出相關同義詞,強化你的網頁主題!!

 

從小開始學Python之小小AI工程師的網紅之路!! (下)

 

台灣本土人工智慧APP雅婷逐字稿幫你解決所有語音辨識的煩惱!!

 

沃而瑪攜手AI人工智慧進入大賣場,偵測缺貨和錯標價格更方便有效率!!

 

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()