2019年4月2日 星期二

前端工程師這就告訴你CSS多重class中空格與逗號到底怎麼用!

前端工程師的CSS多重class:空格與逗號該怎麼用?
前端工程師的CSS多重class:空格與逗號該怎麼用?

有時在 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 設定



3. 兩個 class 中有逗號的例子:五個區塊中,只要 div class 名稱中有出現 first 或是 second 的區塊,就會顯示黑底白字的 CSS 設定


註 : 以上三個範例的 HTML 碼都一樣

 相關閱讀:

前端工程師基礎CSS精選懶人包

了解ID選擇器,成為前端工程師的第一步!

前端工程師如何將CSS樣式表套用至HTML?

用五個小學問做自己想要的CSS背景好簡單!(4)設定背景圖樣

搞清楚前端工程師的字體世界!-相對單位

Python課程讓我明白,人生中誰都逃不過AI的法眼! 

Zepeto:網路行銷課程同學都在用的app,你下載了嗎?