如何在不添加类或ID的情况下用CSS定位嵌套ul中的li元素？

Hey there! I totally get how confusing CSS selectors can be when you're just starting out—let's fix this for you and break down the rules so you understand exactly what's going on.

直接可用的CSS选择器 #

First off, here's the selector that will target exactly the li elements inside the uls nested under #header-nav's top-level lis (your Test 1/Test 2 dropdown options):

#header-nav li ul li {
  font-size: 14px; /* 换成你想要的字体大小即可 */
}

如果想更精准（避免不小心影响到后续可能出现的更深层嵌套li），可以用**直接子元素选择器（>）**来只定位紧邻的父子关系：

#header-nav > li > ul > li {
  font-size: 14px;
}

搞懂选择器背后的规则 #

咱们拆解下这两种选择器的区别，帮你理清子元素和后代元素的定位逻辑：

• 后代选择器（空格分隔）：当你用空格连接选择器时（比如#header-nav li），它会选中#header-nav下所有层级的li后代，不管嵌套多深。对你的场景来说，#header-nav li ul li就是一步步向下定位：先找#header-nav里的任意li，再找这个li里的任意ul，最后找这个ul里的任意li。
• 直接子元素选择器（>）：它只会定位父元素下直接嵌套的子元素。比如#header-nav > li只选中#header-nav直接包含的顶级li，> ul定位这个顶级li的直接子元素ul，最后> li就精准拿到了这个ul里的下拉选项li。

为什么之前的选择器没生效？ #

如果你之前尝试的选择器不起作用，大概率是这两个原因：

• 选错了选择器类型：比如需要后代选择器的时候用了直接子元素选择器（比如你的结构里多了一层ul wrapper，却写了#header-nav > ul > li）
• 优先级冲突：可能有其他CSS规则覆盖了你的样式，但咱们用了ID选择器#header-nav，它的优先级很高，应该能覆盖大部分普通规则

参考示例HTML结构 #

为了确保咱们的理解一致，你的导航结构大概是这样的（上面的选择器完全适配这个结构）：

<nav id="header-nav">
  <li>
    Test 1
    <ul>
      <li>下拉选项1</li>
      <li>下拉选项2</li>
    </ul>
  </li>
  <li>
    Test 2
    <ul>
      <li>下拉选项A</li>
      <li>下拉选项B</li>
    </ul>
  </li>
</nav>

你可以试试这两种选择器，对比下效果，相信能帮你彻底掌握不用额外类/ID时，如何精准定位嵌套元素！

内容的提问来源于stack exchange，提问作者pSav