精确选中 li 元素下的第一个 a 元素的 CSS 选择器

要精确选中 li 元素下的第一个 a 元素而不影响其他 a 元素，可以使用以下几种 CSS 选择器方法：

方法1: :first-child 伪类

li > a:first-child {
  /* 你的样式 */
}

这个选择器会选中作为 li 直接子元素的第一个 a 元素。

方法2: :first-of-type 伪类

li > a:first-of-type {
  /* 你的样式 */
}

这个选择器会选中 li 下所有 a 元素中的第一个（即使前面有其他类型的元素）。

方法3: nth-child(1)

li > a:nth-child(1) {
  /* 你的样式 */
}

注意事项

1. 直接子元素选择器：使用 > 确保只选择直接子元素，避免选择嵌套更深层的 a 元素。

2. 区别：

   • :first-child 要求 a 元素必须是父元素的第一个子元素
   • :first-of-type 只要求是父元素下同类型元素的第一个

3. 兼容性：这些选择器在现代浏览器中都支持良好，包括 IE9+。

示例

<ul>
  <li>
    <a href="#">第一个链接</a> <!-- 会被选中 -->
    <a href="#">第二个链接</a>
    <span>其他内容</span>
    <a href="#">第三个链接</a>
  </li>
  <li>
    <span>其他内容</span>
    <a href="#">第一个链接</a> <!-- 不会被 :first-child 选中，但会被 :first-of-type 选中 -->
    <a href="#">第二个链接</a>
  </li>
</ul>

根据你的具体 HTML 结构选择最适合的选择器。