css 选中激活标签相邻元素的技巧
为了实现图片中展示的样式，即点击激活的标签添加 active 类名，同时修改它相邻前后元素的圆角，css 代码可以采用以下方式：
方法一：:has 选择器（兼容性较差）
li:has(+li.active) { border-radius: 0 0 10px 0;}
此处的 :has 选择器用于选择包含 active 类名后代元素的元素。但是，该选择器的兼容性较差，仅适用于最新的浏览器。
话袋AI笔记
话袋AI笔记, 像聊天一样随时随地记录每一个想法，打造属于你的个人知识库，成为你的外挂大脑
195 查看详情
立即学习“前端免费学习笔记（深入）”；
方法二：自定义属性（推荐）
.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 选中激活标签的相邻元素并修改其圆角？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1159566.html
微信扫一扫 
支付宝扫一扫 
