首页 > web前端 > css教程 > 正文

在css中选择相邻兄弟元素样式

P粉602998670
发布: 2025-11-26 10:10:03
原创
609人浏览过
相邻兄弟元素指同父级且紧接在另一元素后的元素,使用+选择器可对其设置样式,如h2+p{color:red}仅使h2后的首个p变红,适用于标题后段落、表单提示等场景,中间不能有其他元素间隔。

在css中选择相邻兄弟元素样式

在 CSS 中,如果你想选择相邻的兄弟元素,可以使用相邻兄弟组合器(Adjacent Sibling Combinator),用符号 + 表示。

什么是相邻兄弟元素?

相邻兄弟元素指的是紧跟在另一个元素后面的同级元素,并且它们拥有相同的父元素。

例如:

<div>第一个段落</div>
<p>这是紧跟其后的段落</p>

这里的 <p> 就是 <div> 的相邻兄弟元素。

立即学习前端免费学习笔记(深入)”;

如何使用 + 选择器

语法格式如下:

Devin
Devin

世界上第一位AI软件工程师,可以独立完成各种开发任务。

Devin 242
查看详情 Devin
前一个元素 + 后一个元素 { 样式声明 }

只有当“后一个元素”紧接在“前一个元素”之后时,样式才会生效。

示例:让紧跟在 h2 后面的第一个 p 元素文字变红

h2 + p {
  color: red;
}
<h2>标题</h2>
<p>这个段落会变成红色</p>
<p>这个不会(不是相邻兄弟)</p>

常见应用场景

  • 文章中标题下方的第一个段落设置缩进或加大字号
  • 表单中特定输入框后的提示信息样式调整
  • 导航菜单中某一项激活状态后面的项做特殊处理

注意:如果两个元素之间有其他元素(哪怕是一个空格或注释),+ 选择器将不生效。

基本上就这些。+ 选择器简单但很实用,特别适合处理语义化结构中的局部样式控制。

以上就是在css中选择相邻兄弟元素样式的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号