Html CSS 中下一个元素的选择器的语法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3660046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is syntax for selector in CSS for next element?
提问by tony noriega
If I have a header tag <h1 class="hc-reform">title</h1>
如果我有一个标题标签 <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>.
之后我有一个段落<p>stuff here</p>。
How can I ensure using CSS that every <p>tag that follows the h1.hc-reformto use: clear:both;
我如何确保使用 CSS 之后的每个<p>标签h1.hc-reform都使用：clear:both;
would that be:
那会是：
h1.hc-reform > p{
clear:both;
}
for some reason that's not working.
出于某种原因，这是行不通的。
回答by Josh Stodola
This is called the adjacent siblingselector, and it is represented by a plus sign...
这称为相邻兄弟选择器，用加号表示...
h1.hc-reform + p {
clear:both;
}
Note: this is not supported in IE6 or older.
注意：这在 IE6 或更早版本中不受支持。
回答by Stephan Muller
You can use the sibling selector~:
您可以使用同级选择器~：
h1.hc-reform ~ p{
clear:both;
}
This selects all the pelements that come after .hc-reform, not just the first one.
这将选择 之后的所有p元素.hc-reform，而不仅仅是第一个。
回答by Moin Zaman
no >is a child selector.
no>是一个子选择器。
the one you want is +
你想要的是 +
so try h1.hc-reform + p
所以试试 h1.hc-reform + p
browser support isn't great
浏览器支持不是很好
回答by Richard JP Le Guen
The >is a child selector. So if your HTML looks like this:
这>是一个子选择器。因此，如果您的 HTML 如下所示：
<h1 class="hc-reform">
title
<p>stuff here</p>
</h1>
... then that's your ticket.
……那是你的票。
But if your HTML looks like this:
但是如果你的 HTML 看起来像这样：
<h1 class="hc-reform">
title
</h1>
<p>stuff here</p>
Then you want the adjacent selector:
然后你想要相邻的选择器：
h1.hc-reform + p{
clear:both;
}
回答by Justin Russell
Not exactly. The h1.hc-reform > pmeans "any pexactly one level underneath h1.hc-reform".
不完全是。将h1.hc-reform > p意味着“任何p只有一个级别之下h1.hc-reform”。
What you want is h1.hc-reform + p. Of course, that might cause some issues in older versions of Internet Explorer; if you want to make the page compatible with older IEs, you'll be stuck with either adding a class manually to the paragraphs or using some JavaScript (in jQuery, for example, you could do something like $('h1.hc-reform').next('p').addClass('first-paragraph')).
你想要的是h1.hc-reform + p. 当然，这可能会导致旧版本的 Internet Explorer 出现一些问题；如果您想让页面与旧的 IE 兼容，您将不得不在段落中手动添加类或使用一些 JavaScript（例如，在 jQuery 中，您可以执行类似的操作$('h1.hc-reform').next('p').addClass('first-paragraph')）。
More info: http://www.w3.org/TR/CSS2/selector.htmlor http://css-tricks.com/child-and-sibling-selectors/
更多信息：http: //www.w3.org/TR/CSS2/selector.html或http://css-tricks.com/child-and-sibling-selectors/
