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

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>.

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

那会是:

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

由于某种原因,这是行不通的.

Answer 1

这被称为相邻的兄弟选择器,它由加号表示......

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

注意:IE6或更早版本不支持此功能.

Answer 2

您可以使用兄弟选择器 ~:

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

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

Answer 3

不是>儿童选择器.

你想要的是 +

所以试试吧 h1.hc-reform + p

浏览器支持不是很好

Answer 4

这>是一个子选择器.因此,如果您的HTML看起来像这样:

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

......那是你的票.

但是,如果您的HTML看起来像这样:

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

然后你想要相邻的选择器:

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