如何利用 CSS 选中激活标签并影响相邻元素的样式？

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

li:has(~:nth-last-child(1).active) {
  border-radius: 0 10px 0 0;
}

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';
    }
  });
});