css选中指定元素相邻的上一个和下一个元素

<!--

@author: pan
@createDate: 2022-12-06 16:10
-->
<script setup lang="ts"></script>

<template>
  <div>
    <div class="item">第一项</div>
    <div class="item">第二项</div>
    <div class="item active">第三项</div>
    <div class="item">第四项</div>
    <div class="item">第五项</div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  border: 1px solid red;
  margin: 15px;
  padding: 10px;
}
.item:has(+ .active) {
  // 这种选择器是选中的active相邻的上一个兄弟元素
  background-color: green;
}
.active {
  color: #fff;
  background-color: pink;
  & + .item {
    // 这种选择器是选中的active相邻的下一个兄弟元素
    background-color: red;
  }
}
</style>

效果

注意has语法的兼容性

参考资料

CSS 相邻兄弟选择器 (w3school.com.cn)

:has() - CSS：层叠样式表 | MDN (mozilla.org)

(2 封私信 / 84 条消息) css如何选择相邻的前一个元素？ - 知乎 (zhihu.com)