相邻兄弟选择器 - CSS(层叠样式表) 编辑
相邻兄弟选择器 (+
) 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素
的子元素,则第二个元素将被选中。
/* 图片后面紧跟着的段落将被选中 */
img + p {
font-style: bold;
}
语法
former_element + target_element { style properties }
示例
CSS
li:first-of-type + li {
color: red;
}
HTML
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
结果
- One
- Two!
- Three
规范
规范 | 状态 | 备注 |
---|---|---|
Selectors Level 4 next-sibling combinator | Working Draft | 重命名为: "next-sibling" combinator。 |
Selectors Level 3 Adjacent sibling combinator | Recommendation | |
CSS Level 2 (Revision 1) Adjacent sibling selectors | Recommendation | 初始定义。 |
浏览器兼容性
BCD tables only load in the browser
参阅
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论