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

Posted 2023-03-06

【中文标题】CSS中下一个元素的选择器的语法是啥？

【英文标题】：What is syntax for selector in CSS for next element?CSS中下一个元素的选择器的语法是什么？

【发布时间】：2011-04-09 06:30:42

【问题描述】：

如果我有一个标题标签<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 确保 h1.hc-reform 之后的每个 <p> 标记都可以使用：clear:both;

会是：

h1.hc-reform > p
     clear:both;

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

【参考方案1】：

您可以使用sibling selector~：

h1.hc-reform ~ p
     clear:both;

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

【讨论】：

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

【参考方案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/

【参考方案3】：

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

【讨论】：

我当然希望他没有将 p 嵌套在 h1 中。另外，相邻只选择第一个 p。

【参考方案4】：

没有> 是一个子选择器。

你要的是+

所以试试h1.hc-reform + p

浏览器支持不是很好

【讨论】：

2020：十年后浏览器支持非常好。仅供 CSS 新手参考。

【参考方案5】：

这称为adjacent sibling 选择器，用加号表示...

h1.hc-reform + p 
  clear:both;

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

【讨论】：

那只会选择紧跟在h1.hc-reform 之后的p。再说一次，它可能是唯一需要应用 clear: both 才能工作的函数，因为它只是清除了 h1 浮点数，所以它仍然是一个有效的答案。

@BoltClock 是的，您是正确的，我误读了规范并删除了该评论，因为它是错误的。此选择器只会匹配紧跟在h1.hc-reform 前面的p（当然，具有相同的父元素）。

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

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

值得注意的是，如果第一个元素有任何子元素，这将不起作用