*悬停不使用通用子选择器

Question

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>
  <!-- Tabs -->
    <div class="tab-list underline-indicators flex">
       <button
            aria-selected="true"
            class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">
            Moon
       </button>
       <button
            aria-selected="false"
            class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">
            Mars
       </button>
       <button
            aria-selected="false"
            class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">
            Europa
       </button>
     </div>

css

.underline-indicators > * {
  cursor: pointer;
  padding: var(--underline-gap, 1rem) 0;
  border: 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);
}

我想在数字指示类的所有子类上空盘旋。但它不适用于通用选择器(*)。但“焦点”财产运作良好。我希望保留通用选择器，因为我希望在导航和制表符列表中使用单个类。

我应该在这两个地方都有悬停效果。

请帮助我理解我的错误

Answer 1

包含元标记有时可能不起作用，因此也请尝试包括!DOCTYPE html声明。