如何在CSS中分别对每个直接子级应用悬停效果？

Question

我正在尝试创建一个选项卡栏，其直接子元素具有悬停效应，因此我有以下代码，目的是对列表中的每个元素单独应用效果，但idoesn不起作用。

HTML代码：

   <!-- navigation -->
        <div>
          <nav>
            <ul class="primary-navigation underline-indicators flex">
              <li class="active">
                <a class="uppercase text-white letter-spacing-2" href="#"
                  ><span>01</span>Active</a
                >
              </li>
              <li>
                <a class="uppercase text-white letter-spacing-2" href="#"
                  ><span>02</span>Hovered</a
                >
              </li>
              <li>
                <a class="uppercase text-white letter-spacing-2" href="#"
                  ><span>03</span>Idle</a
                >
              </li>
            </ul>
          </nav>
        </div>

CSS代码：

.underline-indicators > * {
  padding: var(--underline-gap, 1rem) 0;
  border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
}

.underline-indicators > *:hover,
.underline-indicators > *:focus {
  border-color: hsl(var(--clr-white) / 0.5);
}

.underline-indicators > .active {
  border-color: hsl(var(--clr-white) / 1);
}

有可能应用这种效果吗?如果有，最佳的方法是什么？

假设我用*:hover替换li:hover时，它工作得很好，但我希望使用*，这样我就可以在代码的不同部分重用相同的样式。

Answer 1

<style>
.underline-indicators {
    list-style:none;
}

.underline-indicators li > *{
  padding: var(--underline-gap, 1rem) 0;
  border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
  color:green;
}

.underline-indicators *:hover,
.underline-indicators *:focus {
  border-color: hsl(var(--clr-white) / 0.5);
}
.underline-indicators .active {
    border-color: hsl(var(--clr-white) / 1);
}
</style>

试试下面的CSS代码

Answer 2

为什么不为要在其上悬停的每个元素设置一个唯一的ID？