碎碎念

轉自 https://pjchender.blogspot.tw/2015/03/cssmultiple-selectorsspace.html

簡單結論：

.one .two{}     /*後面的 class 被鑲嵌在前面的 class 中才會被選取*/
.one.two{}      /*必須同時包含兩個class才會被選取*/
.one, .two{}    /*只要有其中一個 class 就會被選取到*/

--

在 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 都沒有套上任何的背景色，會像是這樣子：

第一種情況，當我的 CSS 選擇器是填入 .one.two ，中間沒有包含空格的時候，只有同時包含有 class 名稱為 one 和 two 的 div 會變色，結果如下：

第二種情況，當我的 CSS 選擇器 .one .two，中間有包含空格時，指的是 one 裡面又包含 two 的 div 才會變色，結果如下：

自己來動手操做看看吧

這裡附上 codepen 的連結，大家可以點選右上角的"Edit on Codepen" ，在 CSS 中自己測試看看，當你選擇 .one，.two，.one.two，.one .two，.one, .two 看看會有什麼不同吧！

--