CSS寫法，一個空格差很多...

這是最近常犯的愚蠢錯誤，可見是少練習CSS的錯誤，那就是"空一格"。
做個簡單的解說 :
/-----------------------------------------------------------------------------------:
Q : 比方說在一個html檔案裏建立一個div id名為test的區塊，
其class為red(我想要讓他背景變成紅色)
此時CSS該如何下?

<div id="test" class="red">

TEST

</div>

(參考結果，圖片故意放小的，怕眼睛太閃)

選擇一 : #test .red{background:yellow}   (#test與.red有空一格)

選擇二 : #test.red{background:red}       (#test與.red沒有空一格)

答案是選擇二，選擇一是錯的，並不是因為background打成yellow而錯，故意寫yellow是要來除錯用的，為什麼是選擇二呢(沒有空一格的)，因為<div id="test" 後面緊接著class="red">因此其css中間不需要空一格，想想CSS為甚麼叫做CSS，串接樣式表阿~，#test.red換成中文的講法就是#test"的(.)"class"red"其背景為紅色。

*什麼情況選擇一才會奏效呢? 

<div id="test">

TEST

<div class="red">

this is yellow!

</div>

</div>

像這樣就會，寫在div id="test"裡面的所有有使用到class="red"的元素，那麼選擇一那種空一格的寫法才會奏效。

有點抽象，多錯幾次就知道了

Note by DOFI: 空格表示階層，不空格表示屬性

(曾經失敗的人   留)