前端工程師絕不能搞錯的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 設定



See the Pen  .first與 .second中間有空格的例子 by Tedutw (@Tedutw) on CodePen.









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碼特性一下就上手! 



前端工程師入門款小常識-認識Class選擇器



前端工程師入門款小常識-認識ID選擇器



邀你認識「KISS 原則」神奇的網路行銷課程



想快速發財嗎?靠網路行銷課程,保證發發發 



URL網址就像摩斯密碼,解構之後可是SEO優化利器!



人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？






















































這個網誌中的熱門文章









Python控制結構一點就通!(5)while迴圈






-














圖片







     關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦!   關於Python-while 迴圈     Python  的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。   Python  的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。   while 迴圈構成，包含了 。   以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。   這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下：     i = 1 #初始值  while i <=5:       #讓迴圈結束的條件     print(i)     i = i + 1       #更新值 (調整)    則結果為：    1 2 3 4 5 >>>   while迴圈的「infinite loop(無限循環)」  Python  的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。   「infinite loop(無限循環)」的範例如下：    while 7==7:   print("這是無限循環迴圈")   結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。  若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。  以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！    x=1 >>> while x>0:          print(x)          x+2  結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是








閱讀完整內容










網頁前端CSS必學兩屬性:display與visible






-














圖片







        今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性!    本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。   CSS ：display 屬性   display:block   對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。   又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。   以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。   在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！   See the Pen  display: block  by Tedutw ( @Tedutw ) on CodePen .     上述範例的 網頁前端  CSS 語法設定如下：  span.block{   display:block; }   display:inline  inline 元素只佔用可用寬度的最大值，並不強制換行。   將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。   See the Pen  display: block  by Tedutw ( @Tedutw ) on CodePen .     上述範例的 CSS 語法設定如下：  span{   display:inline; }   display:none  「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。   在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。   See the Pen  display: none  by Tedutw ( @Tedutw ) on CodePen .     上述介紹的「block」、「inline」、「none」都是最常碰到的的 d








閱讀完整內容