有時候,我們會在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">

參考來源: