当前位置：首页 > 文章列表 > 文章 > 前端 > CSS激活标签及改变相邻元素圆角技巧

CSS激活标签及改变相邻元素圆角技巧

2025-03-25 10:57:54 0浏览收藏

本文介绍如何仅使用CSS，无需JavaScript，实现点击列表标签后改变其相邻元素圆角样式的交互效果。通过巧妙运用CSS相邻兄弟选择器(`+`)，分别选中激活标签(`li.active`)前后的元素(`li.active + li`和`li + li.active`)，并利用`border-radius`属性精准控制其圆角，最终实现平滑的视觉过渡效果(`transition`)。此方法避免了`:has`选择器的兼容性问题，提供了一种高效简洁的解决方案，适用于网页交互设计中类似的需求。

CSS 如何通过激活标签选择相邻的前后元素并改变其圆角样式？

CSS巧妙实现：激活标签影响相邻元素圆角样式

网页交互设计中，常需实现点击一个元素，其相邻元素样式也随之变化的效果。本文将探讨如何利用CSS选择器实现此效果，特别是针对激活标签前后元素圆角的调整。

场景描述

假设一个列表，每个列表项为一个

标签。点击某个

并添加active类后，其前一个和后一个

的圆角样式需相应改变：前一个元素的右下角圆角变圆润，后一个元素的左上角圆角变圆润。

CSS实现

以下CSS代码展示如何实现上述效果，无需JavaScript干预：

.left {
    width: 100px;
}

.left li {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s; /* 添加过渡效果 */
    background: pink;
    border-radius: 0; /* 初始状态无圆角 */
}

li.active {
    background: #fff;
}

/* 选择激活元素的后一个元素 */
li.active + li {
    border-radius: 0 10px 0 0;
}

/* 选择激活元素的前一个元素  (使用通用选择器，避免 :has 的兼容性问题) */
li + li.active {
    border-radius: 0 0 10px 0;
}

这段代码利用了CSS的相邻兄弟选择器(+)。li.active + li选择的是紧跟在具有active类的

元素后面的

元素；li + li.active则选择的是紧跟在

元素后面的，且具有active类的

元素。通过设置border-radius属性，我们分别控制了前后元素的圆角样式。 transition属性添加了过渡效果，使样式变化更平滑。

此方法避免了:has选择器可能存在的浏览器兼容性问题，并提供了一种更简洁、高效的解决方案。通过合理的CSS选择器和属性设置，我们轻松实现了预期效果。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~