html - CSS 目标 li inside ul inside li

Question

我查看了多个数据库，但没有找到匹配或适用于我的场景的答案，所以我求助于专家，或者至少是更有经验的专家。我对 HTML 和 CSS 相当陌生。我正在尝试弄清楚如何在 ul 中定位 li，即在 ul 下的 li 中。有点像下拉菜单，其中主标题有一个包含更多选项的子菜单。我不想添加更多的类或 ID。我已经尝试了以下版本来对其应用一些基本的 CSS，但我似乎无法让它成为目标:

    #header-nav ul li
    li ul li a
    li#header-nav ul li

连后代好像都不行(或者可能是我没做对？)

HTML:

 <ul id="header-nav">
    <li>
      <a href="#"> Home </a>
    </li>
    <li>
      <a href="#">Test Submenu </a>
      <ul>
        <li> > <a href="#"> Test 1 </a> </li>
        <li> > <a href="#"> Test 2 </a> </li>
      </ul>
    </li>
 </ul>

我正在尝试定位测试 1 和测试 2 行。有什么办法可以做到这一点？我利用格式来使其工作。我只想更改这两行的字体大小。我知道添加类或 ID 会更容易，但我试图尽可能避免它们，因为我试图了解整个 child 、后代，更好地定位目标。

Answer 1

那样

#header-nav li > ul > li a {
  background-color: red;
  font-size: 80%;
}

<ul id="header-nav">
    <li>
      <a href="#"> Home </a>
    </li>
    <li>
      <a href="#">Test Submenu </a>
      <ul>
        <li> > <a href="#"> Test 1 </a> </li>
        <li> > <a href="#"> Test 2 </a> </li>
      </ul>
    </li>
        <li>
      <a href="#">Test Submenu </a>
      <ul>
        <li> > <a href="#"> Test 1 </a> </li>
        <li> > <a href="#"> Test 2 </a> </li>
      </ul>
    </li>
        <li>
      <a href="#">Test Submenu </a>
      <ul>
        <li> > <a href="#"> Test 1 </a> </li>
        <li> > <a href="#"> Test 2 </a> </li>
      </ul>
    </li>
 </ul>