如何用CSS选择器精确选中li元素下的第一个a元素而不影响其他a元素？-css教程-PHP中文网

如何用CSS选择器精确选中li元素下的第一个a元素而不影响其他a元素？

碧海醫心

发布： 2025-03-02 15:20:12

原创

290人浏览过

如何用css选择器精确选中li元素下的第一个a元素而不影响其他a元素？

CSS选择器精准定位嵌套元素详解

本文探讨如何使用CSS选择器精确选中特定嵌套元素，避免误选。具体问题：在一个HTML结构中，如何仅通过父级元素li选择其直接子元素a，而不会选中其他a元素，且无需添加额外class属性。

以下是一个示例HTML结构：

<ul>
  <li>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">选项一</a></dd>
      <dd><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">选项二</a></dd>
      <dd><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">选项三</a></dd>
      <dd><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">跳转项</a></dd>
    </dl>
  </li>
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">另一个链接</a></li>
</ul>

登录后复制

目标是仅选中第一个<li>元素下的第一个<a></a>元素（“默认展开”链接），不影响其他<a></a>元素，且不添加任何额外class属性。

立即学习“前端免费学习笔记（深入）”；