如何将CSS应用于无序列表锚标签的顶层而不是辅助？

Question

所以我有以下代码：

<ul class="nav-items">
  <li class="menu-active nav-stuff"><a href='1'>One</a></li>
  <li class="menu-active nav-stuff"><a href='2'>Two</a></li>
     <ul>
       <li><a href='A'>A</a></li>
       <li><a href='B'>B</a></li>
       <li><a href='C'>C</a></li>
     </ul>
   </li>
  <li class="menu-active nav-stuff"><a href='3'>Three</a></li>
</ul>

我正在尝试将边界专门应用于One Two和Three但不是A B和C.现在我有：

.nav-items.menu-active a {
  color: green;
  padding-bottom: 13px;
  border-bottom: 5px solid orange;
 }

这对于击中One Two和Three很有用，但完全搞砸了，因为它也适用于A B和C.我试图做一个：第一个孩子，但那不起作用。有没有办法只击中上层？

编辑：修复了嵌套的无序列表，并为CSS添加了正确的代码。

Answer 1

使用直接后裔/儿童选择器>

子组合子（>）位于两个CSS选择器之间。它仅匹配第二个选择器匹配的元素，这些元素是第一个匹配的元素的子元素。

MDN

.nav-items > li.active > a

a {
  text-decoration: none;
}

.nav-items>li.active>a {
  color: green;
  border-bottom: 5px solid orange;
}

<ul class="nav-items">
  <li class="menu active nav-stuff"><a href='1'>One</a></li>
  <li class="menu active nav-stuff"><a href='2'>Two</a>
    <ul>
      <li><a href='A'>A</a></li>
      <li><a href='B'>B</a></li>
      <li><a href='C'>C</a></li>
    </ul>
  </li>
  <li class="menu active nav-stuff"><a href='3'>Three</a></li>
</ul>

另请注意，padding-bottom: 5px solid orange;是无效的CSS。

我还纠正了HTML，因为你已经关闭了过早保存子菜单的li。

Answer 2

.nav-items.menu-active a {
  color: green;
  padding-bottom: 5px solid orange;
 }
.nav-items ul li a {
    text-decoration: none;
}

<ul class="nav-items">
  <li class="menu active nav-stuff"><a href='1'>One</a></li>
  <li class="menu active nav-stuff"><a href='2'>Two</a></li>
     <ul>
       <li><a href='A'>A</a></li>
       <li><a href='B'>B</a></li>
       <li><a href='C'>C</a></li>
     </ul>
  <li class="menu active nav-stuff"><a href='3'>Three</a></li>
</ul>