重金屬AI工程師的Coding分享

 本篇前端工程師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基礎功之背景重複顯示設定

淺談前端工程師與後端工程師的差異 ​​​​​​​

淺談前端工程師的必備技能有哪些! ​​​​​​​

為了成為前端工程師,我一定要成功-解析CSS語法格式 ​​​​​​​

為了成為前端工程師,我一定要成功-認識Class選擇器 ​​​​​​​

Java課程、UI課程、程式課程、網路行銷課程推薦 ​​​​​​​

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