2016年9月7日

[技術分享] CSS中的多重選擇器(Multiple Selectors)包含空白或逗號



在 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 才會變色,結果如下:


相反的,如果我打的是 .two .one,中間同樣有空格的話,指的是 two 裡面又包含 one 的 div 才會變色,結果如下:


最後,第三種情況是寫成 .one,.two ,中間包含有逗號,這樣指的是只要包含有 one 或 two 的 div 都會被選擇到,結果如下:


自己來動手操做看看吧


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

See the Pen demo_css_MultipleSelectors by PJCHEN (@PJCHENder) on CodePen.


參考資料:CSS-TRICKS

0 意見:

張貼留言