如何使用 CSS 选中激活标签的相邻元素并修改其圆角？

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《如何使用 CSS 选中激活标签的相邻元素并修改其圆角？》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

css 选中激活标签相邻元素的技巧

为了实现图片中展示的样式，即点击激活的标签添加 active 类名，同时修改它相邻前后元素的圆角，css 代码可以采用以下方式：

方法一：:has 选择器（兼容性较差）

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

此处的 :has 选择器用于选择包含 active 类名后代元素的元素。但是，该选择器的兼容性较差，仅适用于最新的浏览器。

方法二：自定义属性（推荐）

.left {
  --active-index: 1; /* 默认激活第一个元素 */
}

li {
  transition: all 0.3s;
  background: pink;
}

/* 激活的标签 */
[aria-current="true"],
li:nth-of-type(var(--active-index)) {
  background: #fff;
}

/* 激活标签的下一个元素 */
li:nth-of-type(calc(var(--active-index) + 1)) {
  border-radius: 0 10px 0 0;
}

/* 激活标签的前一个元素 */
li:nth-of-type(calc(var(--active-index) - 1)) {
  border-radius: 0 0 10px 0;
}

此方法使用自定义属性 --active-index 来存储当前激活的标签索引，并利用 css 函数 calc() 来动态计算相邻元素的索引。这种方法兼容性更好，推荐在实际项目中使用。

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