[技術分享] CSS中的多重選擇器（Multiple Selectors）包含空白或逗號 ~ PJCHENder<br>那些沒告訴你的小細節

在 HTML 中，我們有時候會對同一個標籤給予多個 Class 名稱，像是

<div class="one two"></div>

而在 CSS 裡面則可能同時選擇多個 Class，像是

.one .two{}    /*兩個 class 中有空格*/
.one.two{}     /*兩個 class 中沒有空格*/
.one, .two{}   /*兩個 class 中出現逗號*/

對於初學 CSS 的人來說，常常會搞不清楚這三者的差異，究竟這三者有什麼不同呢？

HTML 部分

首先，在body裡面，當我們看到 <div class="one two"></div> 的時候，並不是表示裡面有一個class叫做「one two」，在字串裡的空格其實是把兩個class給分開了，所以正確的意思是，這個區塊（div）當中，同時包含了兩個 class，一個叫 one，另一個則叫 two。

<div class="one two">
在這個div中，同時有兩個class，一個叫one，一個叫two
</div>

當我們要編輯這個 class 的 style 時，可以選 one 或選 two 其中一個，都可以編輯到這個區塊。

CSS 部分

那麼為什麼我們有時候會看到.one .two{ }這樣子的寫法呢？

這裡，我們需要進一步區別到底是.one.two{ }，.one .two{ }，或這是.one, .two{ }。乍看之下，這三者都長得很像，但實際上是有很大的不同的。

第一個的 one 和 two 中間沒有包含空格，這個的意思表示，某個區塊必須同時具有 one 和 two 的 class 時，才能被 CSS 所選擇到到。
第二個的 one 和 two 中間包含空格，意思是指，我必須要是在 one 裡面的 two，才會被選擇到。
第三個的 one 和 two 中間包含逗號，意思是指 class 中有 one 或 two，都會被編輯器所選擇到。

簡單來說，沒空格表示必須同時包含才會被選取；有空格表示後面的 class 被鑲嵌在前面的 class 中才會被選取；逗號則表示只要有其中一個 class 就會被選取到。

程式範例

讓我們用下面這段 HTML 語法來看個簡單的例子：

<div class="container">
    <div class="one box">只有 one</div>
    <div class="two box">只有 two</div>
    <div class="one two box">同時有 one 和 two</div>
    <div class="one box">
        <div class="two">one 裡面的 two</div>
    </div>
    <div class="two box">
        <div class="one">two 裡面的 one</div>
    </div>
</div>

一開始所有的 box 都沒有套上任何的背景色，會像是這樣子：