CSS下一个元素

如果我有一个标题标记<h1 class="hc-reform">title</h1>

 h1.hc-reform{ float:left; font-size:30px; color:#0e73bb; font-weight:bold; margin:10px 0px; } 

之后，我有一个段落<p>stuff here</p>

我怎么能说使用CSS，每一个<p>标签，遵循h1.hc-reform使用： clear:both;

那会是：

 h1.hc-reform > p{ clear:both; } 

由于某种原因，这是行不通的。

Answer 1

这被称为相邻的兄弟select器，它由一个加号表示…

 h1.hc-reform + p { clear:both; } 

注意：IE6或更低版本不支持此function。

Answer 2

你可以使用兄弟select器 ~ ：

 h1.hc-reform ~ p{ clear:both; } 

这select了所有的.hc-reform ，而不仅仅是第一个。

Answer 3

no >是一个子select器。

你想要的是+

所以试试h1.hc-reform + p

浏览器支持不是很好

Answer 4

>是一个孩子select器 。 所以如果你的HTML看起来像这样：

 <h1 class="hc-reform"> title <p>stuff here</p> </h1> 

那么这是你的票。

但是，如果你的HTML看起来像这样：

 <h1 class="hc-reform"> title </h1> <p>stuff here</p> 

那么你想要相邻的select器 ：

 h1.hc-reform + p{ clear:both; } 

Answer 5

不完全是。 h1.hc-reform > p表示“ h1.hc-reform下的任何一个水平”。

你想要的是h1.hc-reform + p 。 当然，这可能会导致旧版本的Internet Explorer中出现一些问题; 如果你想让页面与老版本的IE兼容，那么你会被困在手动添加类或者使用一些JavaScript（例如，在jQuery中，你可以做一些像$('h1.hc-reform').next('p').addClass('first-paragraph') ）。

更多信息： http : //www.w3.org/TR/CSS2/selector.html或http://css-tricks.com/child-and-siblings-selectors/