DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
CSS 中的相邻兄弟选择器本身不是一个选择器,而是一种组合两个选择器的方式。 例如
p + p {
margin: 0;
}
加号 (+) 是相邻兄弟选择器,位于两个段落标签(元素)选择器之间。 这意味着“选择紧跟在另一个段落标签之后的任何段落标签(两者之间没有任何内容)”。 以下是它将选择的示例
<div>
<p>I'm a paragraph</p>
<p>I get selected!</p>
</div>
<div>
<p>I'm a paragraph</p>
<h2>Monkey hair</h2>
<p>I will NOT get selected</p>
</div>
这在使用语义标记并需要调整某些元素彼此直接相邻的情况时非常有用。
查看 CodePen 中的 相邻兄弟选择器,作者是 Sara Cope (@saracope),来自 CodePen。
更多资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
任何 | 任何 | 任何 | 任何 | 7+ | 任何 | 任何 |
很棒! 谢谢分享!
嘿,伙计,感谢你提供这么多东西,但我需要你的帮助,你需要禁用 php 聊天下的评论,我想问你关于 php 语音聊天的事,我想做一个带语音聊天的聊天室,你能帮我吗? 非常感谢! :)
我希望你会回复
谢谢大家!
这是我发现的最清晰的定义。 谢谢!
解释很清楚,但我发现很难找到在现实生活中使用 + 组合器的 CSS 的好例子 ;-)
上面的例子说明了它的要点,但对于标题,我会使用一个包含 img 的 figure 元素和一个 figcaption 元素
这样你就可以轻松地为标题设置样式,而不需要相邻兄弟选择器。有人有关于相邻 + 组合器的现实世界示例吗?
怎么样
h1, h2 { margin: 1em 0 }
h1 + h2 { margin-top: -.5em }
h1 和 h2 标题的边距,除了 h2 出现在 h1 之后时(现实世界用例:你可能为帖子设置了节标题,但没有为帖子设置引言段落,并且在存在额外的间距的情况下看起来很奇怪)。
servus peter,这里有一个真实的例子:如果我有 100 个 div,并且我只想选择每个 .something-class 的下一个元素。顺便说一句,contao 规则! ;-)
这是一个很好的简洁描述。谢谢。
如果我想使用相邻兄弟选择器为第 10 个元素设置样式,是否有任何快捷方法可以避免使用这么多 + 号?我不想使用 nth-child
例如:- .container > li + li + li + li + li{}
http://codepen.io/anon/pen/vGKEVb
如何使用 :nth-of-type 而不是 nth-child?这样你只会选择例如第 5 个 li 元素,而不管这个 .container 元素中还有多少其他元素。
我注意到以下内容不起作用。有什么想法或解决方法吗?
我也有同样的问题。
我想为兄弟元素的子元素设置样式。
你找到答案了吗?
是不是因为你选择了类 .p 而不是元素 p?
嘿,WilliC,
这是一个笔误,但它仍然不起作用。我认为它正在寻找一个直接的兄弟元素,因此以下内容不起作用
但以下内容有效
TK,我认为这将针对
div
兄弟元素的span
子元素,对应于.body-class p
@Rob Y
我知道这已经是超过一年前了,但以防其他人看到,我回答一下。
我认为这是因为 .body-class p + .body-class img 实际上并不彼此相邻。
这将是正确的
.body-class p + img
你可能没有另一个直接与 p 相邻的 .body-class,所以我认为它不会正确选择。