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

本篇文章向大家介绍《如何利用 CSS 选中激活标签并影响相邻元素的样式？》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

如何利用 css 选中激活标签并影响相邻元素？

为了实现激活标签影响相邻元素的样式需求，可以通过 :has 选择器来实现。以下是如何具体操作：

对于激活标签相邻后的元素，可以在 css 中使用以下代码进行设置：

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

同样地，对于激活标签相邻前的元素，可以使用以下代码进行设置：

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

需要注意的是，:has 选择器在某些老旧浏览器中兼容性较差。因此，在实际项目中可以使用以下 javascript 代码进行兼容性处理：

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

本篇关于《如何利用 CSS 选中激活标签并影响相邻元素的样式？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！