相邻兄弟选择器 - 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:161 次

字数:2677

最后编辑:7年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文