多CSS selector的使用差異

by | May 28, 2019 | HTML & CSS

有時候，我們會在CSS檔案中看到
input[type=”text”] .some-class {}
這樣的命名，有時候又會是
.some-class input[type=”text”] {}
到底，這些不同的順序，有無,，有無空白，會有什麼差別？
本篇文章將告訴大家。

首先，先來看看以下這兩組的差別：

#header.callout {  }

#header .callout { }

第一組是連再一起，中間沒有空格。而第二組則是中間夾了一個空格。

第一組（連在一起的）的意思，是指定下面的狀況套用這一組css selector設定：

<div id = 'header' class = 'callout'>
</div>

第二組（中間有一個空格）則是在下面的情況下生效：

<div id = 'header'>
    <div class = 'callout'>
    </div>
</div>

這樣可以分辨之中的差異了嗎？簡單說，連載一起的，要在同一個html標籤中才會起作用，而家一個空格，則是有架構上的繼承關係。

而第三種狀況則是：

#header, .callout {  }

逗號之後一個空格。這樣的設定意思是，無論是 id = ‘header’ 或 class = ‘callout’都套用。因此，下面的範例中，內容一與內容二都會同樣呈現灰色。

<style type='text/css'>
    #header, .callout {
        color:#313131;
    }
</style>
<div id = 'header'>
    內容一
</div>
<div class = 'callout'>
    內容二
</div>

最後，則是如果有指定特別類型的input或其他html標籤的話，作法則要用下列的方式才會生效喔！

<style type='text/css'>
    input.someclass[type="text"]
</style>
<input type="text" class="someclass" name="fields0">

參考來源：