在构建导航栏或类似交互式元素时，我们经常需要：当某个标签被激活（例如，添加active类）时，不仅要修改该标签本身的样式，还要调整其相邻元素的样式。例如，激活标签背景变白，同时修改其前后元素的圆角。
本文将演示如何通过CSS选择器，精确控制激活标签前后元素的样式。
假设我们的HTML结构如下：
<ul> <li class="left">Item 1</li> <li class="left">Item 2</li> <li class="left active">Item 3</li> <li class="left">Item 4</li> <li class="left">Item 5</li> </ul>
初始CSS样式：
立即学习“前端免费学习笔记（深入）”；
.left {
width: 100px;
}
.left li {
height: 45px;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s;
background: pink;
}
li.active {
background: #fff;
}要修改激活标签(active类)之后元素的样式，可以使用+选择器：
li.active + li {
border-radius: 0 10px 0 0; /* 修改下一个兄弟元素的右上角圆角 */
}要修改激活标签之前的元素样式，则需要用到:has()选择器 (注意浏览器兼容性):
li:has(+li.active) {
border-radius: 0 0 10px 0; /* 修改上一个兄弟元素的右下角圆角 */
}通过以上CSS代码，当Item 3被激活时，Item 2的右下角圆角和Item 4的右上角圆角将被成功修改。 如果:has()选择器在你的浏览器环境中兼容性不好，可以考虑使用JavaScript来实现类似的功能。
这样，我们就实现了对激活标签前后相邻元素的样式精准控制。 记住，:has()选择器的浏览器兼容性需要额外关注。
以上就是如何使用CSS选择并修改激活标签相邻的前后元素的样式？的详细内容，更多请关注php中文网其它相关文章！
Windows激活工具是正版认证的激活工具，永久激活，一键解决windows许可证即将过期。可激活win7系统、win8.1系统、win10系统、win11系统。下载后先看完视频激活教程，再进行操作，100%激活成功。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
789
