前端工程師的專屬小課:CSS的多重class中空格與逗號差在哪?

前端工程師的專屬小課: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 設定

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中常見的邊框屬性解釋

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

前端工程師後端工程師傻傻分不清?想學寫網頁不知道可就糗了!

工程師們口中的Python到底是甚麼? 很重要嗎?

最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?

人工智慧寫作能力勝過人類,文章新聞真假難辨!

美國NASDAQ上市公司、外商IT教育培訓企業

 

發佈留言

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