如何將內聯元素和塊級元素同時定位？

我已經一個WordPress主題生成的短代碼，其輸出是：如何將內聯元素和塊級元素同時定位？

<div class="heading clearfix"><i class="icon icon-list-ol h2"></i> <h2> Hello World! </h2></div>

我需要的風格圖標和H2元素，如何定位在一起？

嘗試這一個：

i.icon.icon-list-ol.h2 h2 {color:red;}

，但沒有奏效。
PS：這是由wordpress主題生成的簡碼。

2013-07-18 Sup3r

用逗號分隔它們：

i.icon.icon-list-ol.h2, h2 {color:red;}

2013-07-18 12:30:46

謝謝，它的工作。雖然你建議添加div。作爲下面的答案更具體？ – Sup3r

這取決於你將如何設計你的CSS在整體。這是一個很好的閱讀，如果你想知道更多關於CSS特異性http://css-tricks.com/specifics-on-css-specificity/ –

感謝您的寶貴資源，我的意思是如果萬一我使用相同的圖標與h2標題在網站的另一個頁面上，我想這些樣式也會在每個與h2標題相同的圖標上生效，下面的答案是否僅僅針對那些元素？ – Sup3r

試試這個：

div.heading i.icon, 
div.heading h2 { 
    color:red; 
}

2013-07-18 12:31:02

+1將它們都放在div中，但我認爲對班級使用'heading'會更好。 'clearfix'可能只是一個明確的修復，而不是頁面部分的標識符。 –

@MrLister謝謝！是的，你可能是對的，我會編輯我的答案:) –

所以我應該怎麼使用這個或lorenzo.marocan？什麼是最好的兼容性和特異性。 – Sup3r

試試這個

i.icon.icon-list-ol.h2 + h2 {color:red;}

2013-07-18 12:31:46

會不會

.icon , .h2 { color : red; }

工作？

2013-07-18 12:32:00 mickadoo

無論如何，回答這個問題，沒有。這不解決H2。 –

單獨i.icon.icon一覽ol.h2 H2用逗號（，）

在CSS你必須改變代碼

i.icon.icon-list-ol.h2, h2 {color:red;}

2013-07-18 12:32:35

謝謝，但加號（+）只會針對沒有圖標的h2元素。 – Sup3r

謝謝，我已經更新了我的答案 –

回答