如何利用 CSS 选中激活标签并影响相邻元素的样式？-css教程-PHP中文网

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

霞舞

发布： 2024-11-08 12:39:01

原创

275人浏览过

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

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

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

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

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

登录后复制

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

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

立即学习“前端免费学习笔记（深入）”；

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 选中激活标签并影响相邻元素的样式？的详细内容，更多请关注php中文网其它相关文章！