靶向內<hX>

我有一種有趣的項目，我需要在CSS來定位：這是一個<h[1-6]>這與類alert-message和block-message一個<div>內的內部<small>。靶向內<hX>

它基本上是這樣的：

<div class="alert-message block-message"> 
    <h3> 
     Hello World 
     <small>And Hello Universe, too!</small> 
    </h3> 
</div>

我已經試過：

div.alert-message.block-message h1,h2,h3,h4,h5,h6 small

和

div.alert-message.block-message h1 small, h2 small, h3 small, h4 small, h5 small, h6 small

但既不是工作，顯然。我只需要改變這些特定的<small>塊的字體顏色。我在上面「找到」元素的方法有什麼問題？

來源

2011-10-31 Naftuli Kay

專門針對這些，你的選擇會是這樣：

div.alert-message.block-message h1 small, 
div.alert-message.block-message h2 small, 
div.alert-message.block-message h3 small, 
div.alert-message.block-message h4 small, 
div.alert-message.block-message h5 small, 
div.alert-message.block-message h6 small { 

}

我一直希望有一個通用選擇了h1-h6，但不幸的是，我們需要分別針對他們。

我的上述方法在「發現」元素時出現了什麼問題？

記住逗號分開,選擇，所以：

div.alert-message.block-message h1,h2,h3,h4,h5,h6 small {}

是一樣的：

div.alert-message.block-message h1 {/* styles */} 
h2 {/* styles */} 
h3 {/* styles */} 
h4 {/* styles */} 
h5 {/* styles */} 
h6 small {/* styles */}

我不知道是否有一個LESS捷徑？

有，因爲我知道的標題沒有捷徑，但它看起來像你可以使用嵌套的選擇是這樣的：

div.alert-message.block-message { 
    h1, h2, h3, h4, h5, h6 { 
     small {/* your CSS */} 
    } 
}

來源

2011-10-31 06:29:38

這是一個無賴，它必須是這個冗長的，但謝謝你的答案！我想知道是否有更少的快捷方式... –

好吧，你可以隨時在標題中添加一個類，然後簡單地使用：'.message-heading small {} –

確實如此，但是這樣做會少得多黑客:) –

逗號分隔整選擇，沒有選擇的部分，你似乎在期待。

div.alert-message h1,h2意味着選擇div.alert-message h1並選擇h2（全部）

你需要一個寫

div.alert-message.block-message h1 small, div.alert-message.block-message h2 small, div.alert-message.block-message h3 small, div.alert-message.block-message h4 small, div.alert-message.block-message h5 small, div.alert-message.block-message h6 small

來源

2011-10-31 06:30:16

目標的描述各一個聲明。

來源

2011-10-31 06:56:54 SiriusKoder

回答

相關問題