Question

我有一些像这样的标记：

<li>
  <span>
    <div>
      <a href="#" class="anchor menu-active">Afghanistan</a>
      <div class="container menu-visible"></div>
    </div>
   </span>
   <span>
      <div>
        <a href="#" class="anchor">Kabul(AFT)</a>
        <div></div>
      </div>
  </span>
</li>

我希望根据anchor选择类li的最后一个元素。结果是应该选择<a href="#" class="anchor">Kabul(AFT)</a>。 anchor中的li类可以包含任意数量的元素。

我想出了这个选择器：li .anchor:last-of-type，但它选择了那两个元素。

如何选择anchor类的绝对最后一个元素？

Answer 1

我没有看到您列出的项目，似乎您将所有项目都放在同一个项目中。

为什么不制作子列表：

<li>
  <a href="#">Afghanistan</a>
  <ul>
    <li>
      <a href="#">Kaboul(AFT)</a>
    </li>
   </ul>
</li>

如果你想要获得最后一个选择器，那么你使用last-child。如果您尝试使用特定类获取最后一个元素，那么

.anchor：last-of-type {}

是正确的选择。

There is this post too.

Answer 2

我最终使用了一些javascript来解决问题，因为使用干净的基于CSS选择器的解决方案是不可能的。

最初，计划是抓住最后一个.anchor并获取x和y坐标来计算叠加的一组坐标。

解决方案是获取父li的坐标，得到它的高度，然后进行计算。

不像CSS选择器那样整洁，但它有效。

根据父级选择仅某个类的最后一个子级

2 个答案: