如何仅通过CSS选择父级ul下的直接子元素li？

嘿，我来帮你搞定这个问题！你现在遇到的情况是，之前的CSS选择器会把所有层级li下的a标签都染成红色，但你只想让最外层父级ul的直接子li里的a标签变色，对吧？

问题出在哪？ #

你之前尝试的这些选择器：

ul:first-of-type li a { color: red;} 
ul > li a { color: red;} 
ul:first-child li a { color: red;}

问题都出在后代选择器的使用上：比如ul > li a里，ul > li确实选中了顶层ul的直接子li，但后面的li a是后代选择器，它会匹配这个li下所有层级的a标签——包括li里面嵌套的ul里的li下的a，这就导致了不需要的元素也被选中了。

正确的解决方案 #

要只选中顶层ul的直接子li里的直接子a标签，我们需要用**子组合器（>）**来精准限制层级，写法如下：

基础写法（适用于页面只有这个顶层ul的情况）

/* 仅匹配顶层ul的直接子li的直接子a标签 */
ul > li > a {
  color: red;
}

更精准的写法（页面有多个ul时推荐）

如果页面上还有其他ul元素，为了避免误匹配，建议给顶层ul加一个类名，比如top-level-ul，然后这样写：

<ul class="top-level-ul">
  <li><a href="">Text</a></li>
  <li><a href="">Text</a></li>
  <li><a href="">Text</a></li>
  <li>
    <a href="">Text</a>
    <ul>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
      <li><a href="">Text</a></li>
    </ul>
  </li>
</ul>

.top-level-ul > li > a {
  color: red;
}

原理说明 #

这里的>是CSS的子组合器，它只会匹配元素的直接子元素：

1. ul > li（或.top-level-ul > li）：只选中顶层ul的直接子li，不会选中嵌套在li里的内层ul的li；
2. > a：只选中这些直接子li的直接子a标签，不会选中li里其他嵌套元素下的a。

这样一来，就完美实现了你想要的效果——只有顶层ul的直接子li里的a会变成红色，嵌套ul里的a不会受到影响。

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