233

如果我有一个标题标签<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;
}

由于某种原因，这不起作用。

4

5 回答 5

448

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

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

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

于 2010-09-07T15:24:40.547 回答
74

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

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

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

于 2010-09-07T15:30:55.110 回答
16

no>是子选择器。

你想要的是+

所以试试h1.hc-reform + p

浏览器支持不是很好

于 2010-09-07T15:25:28.580 回答
8

这>是一个子选择器。因此，如果您的 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;
}
于 2010-09-07T15:26:12.130 回答
2

不完全是。意思是“下面的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')）。

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

于 2010-09-07T15:32:15.107 回答