Html 仅选择父类中某个类的最后一个子类

我有一些这样的标记：

<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>

我希望根据li选择最后一个类锚元素。结果是应该选择。在li中可以有任意数量的元素与该锚类一起使用

我提出了这个选择器：li.anchor:last of type，但它选择了其中的两个元素

---

如何使用anchor类选择最后一个元素？

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

你为什么不列一个子列表：

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

如果试图获取选择器的最后一个，则使用最后一个子项。如果您试图获取具有特定类的最后一个元素，那么

.anchor:类型{}的最后一个

这是正确的选择

---

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

最初，计划是抓取最后一个.anchor并获取其x和y坐标，以计算覆盖的一组坐标

解决方法是只得到父li的坐标，得到它的高度，然后进行计算

---

不像CSS选择器那样整洁，但它可以工作。

不幸的是，我无法更改标记，因为它是由后端和其他一些库生成的。我问题中的li实际上在ul中，但由于我使用YUI，我正在从问题中的标记运行此选择。问题是需要与.anchor类区分的选择器与其他选择器分开，因此浏览器将每个项作为最后一项读取，如图所示。你真的不能超越模板吗？不，：last of type选择它的类型的最后一个元素，而不是它的类。你不能使用CSS选择具有特定类的DOM中的绝对最后一个元素。将来，您可能可以选择具有特定类的最后一个子元素，但无论结构如何，都不能选择最后一个元素。