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

200

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

由于某些原因无法正常工作。

— 托尼·诺列加
source

397

这称为相邻的同级选择器，用加号表示...

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

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

— 乔什·斯托多拉
source

4

那只会选择p紧随其后的h1.hc-reform。再一次，它可能是唯一clear: both需要对其起作用的应用程序，因为它只是清除h1浮点数，因此它仍然是一个有效的答案。

— BoltClock

@BoltClock是的，您是正确的，我误读了规范，并删除了该注释，因为它是错误的。此选择器将仅匹配p紧随其后的h1.hc-reform（当然，具有相同的父元素）。

— 乔什·斯托多拉

4

哇，不知道相邻的兄弟选择器。很好，谢谢！

— 理论

1

在这种情况下，〜是更好的选择器。这是一个工作的JSfiddle jsfiddle.net/dZAtt

— ProblemsOfSumit

值得注意的是，如果第一个元素有任何子代，则无法使用

— 72GM

60

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

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

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

— 斯蒂芬·穆勒（Stephan Muller）
source

第一个链接中的IE错误是模糊的边缘情况，这可能就是为什么quirksmode忽略它们的原因。

— 斧头。

14

否>是子选择器。

你想要的是 +

所以尝试 h1.hc-reform + p

浏览器支持不是很好

— 莫恩·扎曼（Moin Zaman）
source

2020年：十年后，对浏览器的支持非常出色。只是CSS新手的信息。

— AlexioVay

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;
}

— 理查德JP Le Guen
source

4

我肯定希望他不要将p嵌套在h1的内部。而且，相邻只能选择第一个p。

— 斯蒂芬·穆勒

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')）。

— 贾斯汀·罗素（Justin Russell）
source