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

相邻兄弟元素指同父级且紧接在另一元素后的元素，使用+选择器可对其设置样式，如h2+p{color:red}仅使h2后的首个p变红，适用于标题后段落、表单提示等场景，中间不能有其他元素间隔。

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

什么是相邻兄弟元素？

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

例如：

这里的 <p></p> 就是 <div> 的相邻兄弟元素。 <h3>如何使用 + 选择器</h3> <p>语法格式如下：</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1327"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680183323472.jpg" alt="爱改写"> </a> <div class="aritcle_card_info"> <a href="/ai/1327">爱改写</a> <p>AI写作和改写润色工具</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="爱改写"> <span>87</span> </div> </div> <a href="/ai/1327" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="爱改写"> </a> </div> <font face="Courier New"> 前一个元素 + 后一个元素 { 样式声明 } </font> <p>只有当“后一个元素”紧接在“前一个元素”之后时，样式才会生效。</p> <p><strong>示例：</strong>让紧跟在 h2 后面的第一个 p 元素文字变红</p> <font face="Courier New"> h2 + p {<br>   color: <a style="color:#f60; text-decoration:underline;" title="red" href="https://www.php.cn/zt/122037.html" target="_blank">red</a>;<br> } </font> <font face="Courier New"> <h2>标题</h2> <br><p>这个段落会变成红色</p> <br><p>这个不会（不是相邻兄弟）</p> </font> <h3>常见应用场景</h3> <ul> <li>文章中标题下方的第一个段落设置缩进或加大字号</li> <li>表单中特定输入框后的提示信息样式调整</li> <li>导航菜单中某一项激活状态后面的项做特殊处理</li> </ul> <p>注意：如果两个元素之间有其他元素（哪怕是一个空格或注释），+ 选择器将不生效。</p> <p>基本上就这些。+ 选择器简单但很实用，特别适合处理语义化结构中的局部样式控制。</p> </div>

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