css - 从嵌套的动态导航列表中选择最后一个 a:link

Question

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

如何为这个动态创建的导航列表选择最后一个 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: "";
}

标签： css

Answer 1

根据您给定的结构，您必须选择.chidren ul.

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

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