当前位置：文江博客话题详情

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

发布于 2024-09-18 06:06:26 字数 475 浏览 16 评论 0 原文

如果我有一个标题标签

`title`

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

，之后我有一个段落

stuff here

。

如何确保使用 CSS 后 h1.hc-reform 后面的每个

标签使用： clear:both;

都会那是：

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

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

原文

If I have a header tag <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

and after that I have a paragraph <p>stuff here</p>.

How can I ensure using CSS that every <p> tag that follows the h1.hc-reform to use: clear:both;

would that be:

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

for some reason that's not working.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧故 2024-09-25 06:06:26

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

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

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

This is called the adjacent sibling selector, and it is represented by a plus sign...

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

Note: this is not supported in IE6 or older.

回复收藏 0 原文

若沐 2024-09-25 06:06:26

您可以使用同级选择器 ~：

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

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

You can use the sibling selector ~:

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

This selects all the p elements that come after .hc-reform, not just the first one.

回复收藏 0 原文

放低过去 2024-09-25 06:06:26

没有 > 是子选择器。

你想要的是 +

所以尝试 h1.hc-reform + p

浏览器支持不是很好

回复收藏 0 原文

等风也等你 2024-09-25 06:06:26

> 是一个子选择器。因此，如果您的 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;
}

The > is a child selector. So if your HTML looks like this:

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

... then that's your ticket.

But if your HTML looks like this:

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

Then you want the adjacent selector:

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

回复收藏 0 原文

溇涏 2024-09-25 06:06:26

不完全是。 h1.hc-reform > p 表示“h1.hc-reform 下面的任意 p 级别”。

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