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

Question

想实现图片中的样式,点击激活的标签添加上active类名，然后选择active类名相邻的前后元素（改变相邻的前一个元素的右下角的圆角，改变相邻的后一个元素的右上角圆角）

        .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>

Answer 1

//上一个兄弟元素

dom.previousSibling  

//下一个兄弟元素

dom.nextSibling

Answer 2

用的jquery,没验证过可以试试

$(this).addClass('active').siblings().removeClass('active').prev().css('border-bottom-right-radius','0').end().next().css('border-top-right-radius','0');

Answer 3

不用去考虑激活相邻的，只要把自身的 ::before 和 ::after 利用起来就了，比如：

.item.active { position: relative; z-index: 2 }.item.active::before,.item.active::after { position: absolute; right: 0; content: ''; border-radius: 50%;}.item.active::before { top: -16px; }.item.active::after { bottom: -16px; }

这样的话，当你激活当前 .item 的时候，会有一个 .active 类名，也就可以把两个伪元素丢过去了。

如果遇到第一个或者最后一个的话，那么就 .item.acitve:last-child::after .... 处理一下。

Answer 4

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

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

jsfiddle