Question

如果我有标题标记<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>。

如何确保使用<p>后面的每个h1.hc-reform标记使用的CSS：clear:both;

那会是：

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

由于某种原因无效。

Answer 1

这称为adjacent sibling选择器，它由加号...

表示

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

注意：IE6或更早版本不支持此功能。

Answer 2

您可以使用sibling selector ~：

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

这会选择p之后的所有.hc-reform元素，而不仅仅是第一个元素。

Answer 3

没有>是子选择器。

你想要的是+

所以请尝试h1.hc-reform + p

浏览器支持不是很好

Answer 4

>是child selector。因此，如果你的HTML看起来像这样：

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

...那就是你的票。

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

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

然后你想要adjacent selector：

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

Answer 5

不完全是。 h1.hc-reform > p表示“p下面的任何h1.hc-reform正好一层”。

你想要的是h1.hc-reform + p。当然，这可能会导致旧版Internet Explorer出现一些问题;如果你想让页面与旧的IE兼容，你将不得不手动向段落添加一个类或使用一些JavaScript（例如，在jQuery中你可以做$('h1.hc-reform').next('p').addClass('first-paragraph')之类的事情。） / p>

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

CSS中下一个元素的选择器的语法是什么？

5 个答案: