css 选中激活标签相邻元素的技巧
为了实现图片中展示的样式，即点击激活的标签添加 active 类名，同时修改它相邻前后元素的圆角，css 代码可以采用以下方式：
方法一：:has 选择器（兼容性较差）
li:has(+li.active) {
border-radius: 0 0 10px 0;
}此处的 :has 选择器用于选择包含 active 类名后代元素的元素。但是，该选择器的兼容性较差，仅适用于最新的浏览器。
立即学习“前端免费学习笔记（深入）”；
方法二：自定义属性（推荐）
.left {
--active-index: 1; /* 默认激活第一个元素 */
}
li {
transition: all 0.3s;
background: pink;
}
/* 激活的标签 */
[aria-current="true"],
li:nth-of-type(var(--active-index)) {
background: #fff;
}
/* 激活标签的下一个元素 */
li:nth-of-type(calc(var(--active-index) + 1)) {
border-radius: 0 10px 0 0;
}
/* 激活标签的前一个元素 */
li:nth-of-type(calc(var(--active-index) - 1)) {
border-radius: 0 0 10px 0;
}此方法使用自定义属性 --active-index 来存储当前激活的标签索引，并利用 css 函数 calc() 来动态计算相邻元素的索引。这种方法兼容性更好，推荐在实际项目中使用。
以上就是如何使用 CSS 选中激活标签的相邻元素并修改其圆角？的详细内容，更多请关注php中文网其它相关文章！
Windows激活工具是正版认证的激活工具，永久激活，一键解决windows许可证即将过期。可激活win7系统、win8.1系统、win10系统、win11系统。下载后先看完视频激活教程，再进行操作，100%激活成功。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
425
收藏
