CSS :first-of-type伪类未按预期生效，如何仅为li内首个a标签着色？

问题出在你的选择器没限定直接子元素，li.open a:first-of-type会匹配所有后代里的第一个a元素——包括嵌套子ul中每个li的a标签，所以所有链接都变蓝了。

你需要用**直接子元素选择器 >**来指定只选中li.open的直接子级a标签，这样就不会影响嵌套的子菜单链接：

li.open > a {
  color: blue;
}

如果要明确强调是第一个直接子元素，也可以写成：

li.open > a:first-of-type {
  color: blue;
}

完整示例代码 #

CSS

li.open > a {
  color: blue;
}

HTML

<ul>
  <li>
    <a href="#">Section 1</a>
    <ul class="off-canvas__nav-sub">
      <li><a href="#">Sub page 1</a></li>
      <li><a href="#">Sub page 2</a></li>
      <li><a href="#">Sub page 3</a></li>
    </ul>
  </li>
  <li class="open">
    <a href="#">Section 2</a>
    <ul class="off-canvas__nav-sub">
      <li><a href="#">Sub page 1</a></li>
      <li><a href="#">Sub page 2</a></li>
      <li><a href="#">Sub page 3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Section 3</a>
  </li>
  <li>
    <a href="#">Section 4</a>
  </li>
  <li>
    <a href="#">Section 5</a>
  </li>
</ul>

修改后只有"Section 2"会变成蓝色，子菜单的链接不受影响。

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