如何利用 css 选中激活标签并影响相邻元素？
为了实现激活标签影响相邻元素的样式需求，可以通过 :has 选择器来实现。以下是如何具体操作：
对于激活标签相邻后的元素，可以在 css 中使用以下代码进行设置：
li:has(+li.active) { border-radius: 0 0 10px 0;}
同样地，对于激活标签相邻前的元素，可以使用以下代码进行设置：
立即学习“前端免费学习笔记（深入）”；
li:has(~:nth-last-child(1).active) { border-radius: 0 10px 0 0;}
需要注意的是，:has 选择器在某些老旧浏览器中兼容性较差。因此，在实际项目中可以使用以下 javascript 代码进行兼容性处理：
document.querySelectorAll('li').forEach((item) => { item.addEventListener('click', (e) => { if (!e.target.classList.contains('active')) { e.target.classList.add('active'); } const prevSibling = e.target.previousElementSibling; const nextSibling = e.target.nextElementSibling; if (nextSibling && !nextSibling.classList.contains('active')) { nextSibling.style.borderRadius = '0 0 10px 0'; } if (nextSibling && nextSibling.classList.contains('active')) { nextSibling.style.borderRadius = '0 10px 10px 0'; } if (prevSibling && !prevSibling.classList.contains('active')) { prevSibling.style.borderRadius = '0 10px 0 0'; } if (prevSibling && prevSibling.classList.contains('active')) { prevSibling.style.borderRadius = '10px 10px 0 0'; } });});
以上就是如何利用 CSS 选中激活标签并影响相邻元素的样式？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632375.html
微信扫一扫 
支付宝扫一扫 
