css - 选择最后一个 :link from a nested dynamic navigation list

Question

我试图从一堆嵌套的无序列表中删除 a:link 的 :after 伪元素的内容。我似乎无法选择它。

如何为这个动态创建的导航列表选择最后一个 a:link？谢谢。

HTML

<nav class="site-nav children-links">

  <span class="parent-link">
    <a href="http://localhost/learnwebcode/index.php/sample-grandparent/">
      Sample grandparent
    </a>
  </span>

  <ul>
    <li class="page_item page-item-2 page_item_has_children current_page_item"><a href="http://localhost/learnwebcode/index.php/sample-grandparent/sample-page/" aria-current="page">Sample Parent Page</a>
    <ul class="children">
      <li class="page_item page-item-16">
        <a href="http://localhost/learnwebcode/index.php/sample-grandparent/sample-page/sample-child-one/">Sample child one</a>
      </li>
      <li class="page_item page-item-18">
        <a href="http://localhost/learnwebcode/index.php/sample-grandparent/sample-page/sample-child-two/">Sample child two</a>
      </li>
    </ul>
    </li>
  </ul>

</nav>

CSS

.children-links a:after {
  content: "➤";
}

.children-links ul:last-child li a:last-child:after {
  content: "";
}

Answer 1

根据给定的结构，您必须选择 .chidren ul 中的最后一个列表项。

anchor 链接始终是 li 的最后一个子元素，因此不需要任何额外的选择器。

.children-links ul.children li:last-child a:after {
  content: "";
}