css如何实现选中激活标签相邻的前后元素??

作者站长头像
站长
· 阅读数 6

想实现图片中的样式,点击激活的标签添加上active类名,然后选择active类名相邻的前后元素(改变相邻的前一个元素的右下角的圆角,改变相邻的后一个元素的右上角圆角)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;
        }
        li.active+li{
            border-radius: 0 10px 0 0;
        }
        <ul class="left">
              <li :class="currentIndex==index?'active':''" @click="handleClick(index)" v-for="(item,index) in list" :key="index">{{item.name}}</li>
        </ul>
回复
1个回答
avatar
test
2024-06-25

使用 :has 选择器,但是兼容性不太好:

li:has(+li.active) {
  border-radius: 0 0 10px 0;
}

jsfiddle

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容