類名級聯或用空格分隔

當你用空格分隔樣式類？舉個例子：以下兩塊CSS的區別是什麼？類名級聯或用空格分隔

1座：

div { 
    color: brown; 
} 

div.special { 
    font-size: 18px; 
}

2座：

div { 
    color: brown; 
} 

div .special { 
    font-size: 18px; 
}

這是HTML：

<div class="special">The quick brown fox jumps over the lazy dog.</div>

我試過兩個版本。只有塊1文本時便會在字體大小18

來源

2013-05-31 Bart Weber

好點！不知道它與'css選擇器'有關。 –

您單獨的類由空間時，要參考後代元素，你將它們連接起來，當你想指與多個類的單個元素。

例如，提及一個div兩個類，例如<div class="foo bar">你可以使用：

div.foo.bar {...}

來指代子span元素<div class="foo"><span class="bar">stuff</span></div>你可以使用：

div.foo .bar {...}

來源

2013-05-31 13:53:58 j08691

我可能會說「一個或多個班級」而不是「多個班級」，但除此之外，這是一個很好，簡潔的回覆！ – jmeas

非常感謝您的快速回復！ –

空間指出，這是一個子項。

div.special

目標具有類一個div special而

div .special

目標的一個div元件

來源

2013-05-31 13:54:30 hexblot

的空間內與special類元素指示嵌套：

div .foo /* .foo is inside div */

沒有空間表示進一步特異性：

div.foo /* any div that is also .foo */

來源

2013-05-31 13:54:34 Sampson

簡短但非常重要！謝謝！ –

div.special指

<div class="special"> <- this

div .special指

<div> 
    <p class="special"> <- this 
</div>

不neccassily一個p BTW

來源

2013-05-31 13:54:39 Liam

div.special將選擇具有.special類div元素，它不會選擇與.special類，因此，如果您有任何其他元素像<ul class="special">將被排除在外，在那裏，因爲這div .special將選擇具有.special類被嵌套在div因此，所有的元素這將選擇<ul class="special">所以它的結論是，第一個1比第二個

所以你的情況無論是嚴格的，你可以簡單地使用.special或者你可以使用div.special

來源

2013-05-31 13:54:41

類名級聯或用空格分隔

回答

相關問題