如何将内联元素和块级元素同时定位？

我已经一个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

谢谢，我已经更新了我的答案 –

回答