如何为无序列表顶层锚点标签应用CSS而不影响次级锚点？

没问题，我来帮你搞定这个需求！你想要的是只给「One、Two、Three」这些顶层<li>里的<a>加边框，而不影响嵌套列表里的「A、B、C」，核心就是要精准定位顶层元素，避免选择器“穿透”到后代层级。

为什么之前的方法没生效？ #

你尝试的a:first-child之所以没用，是因为这个选择器会匹配所有作为父元素第一个子元素的<a>，包括嵌套列表里的<a>（比如嵌套<li>里的第一个<a>也会被选中），而且它只能选中第一个符合条件的<a>，没法覆盖所有顶层的锚点。

正确的解决方案：使用直接子选择器 > #

直接子选择器>可以让你只选中某个元素的直接子元素，不会深入到后代层级。针对你的结构，我们可以这样写：

/* 仅选中顶层<ul>的直接子<li>中的<a>标签 */
ul > li > a {
  border: 2px solid #2c3e50;
}

如果页面上有多个<ul>，为了避免误匹配其他列表，更稳妥的方式是给顶层<ul>加一个类名，比如top-nav：

<ul class="top-nav">
  <li><a href="#one">One</a>
    <ul>
      <li><a href="#a">A</a></li>
      <li><a href="#b">B</a></li>
    </ul>
  </li>
  <li><a href="#two">Two</a></li>
  <li><a href="#three">Three</a>
    <ul>
      <li><a href="#c">C</a></li>
    </ul>
  </li>
</ul>

然后对应的CSS：

.top-nav > li > a {
  border: 2px solid #2c3e50;
}

这样就能100%确保只有顶层导航里的锚点会被加上边框，嵌套列表里的元素完全不受影响。

原理说明 #

>选择器的作用是“只匹配直接父子关系的元素”：

• .top-nav > li：只会选中top-nav这个<ul>的直接子元素<li>（也就是包含One、Two、Three的那些<li>）
• 再加上> a：就只会选中这些顶层<li>里的直接子元素<a>，完美避开嵌套列表里的内容。

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