就父级而言，仅选择某个类的最后一个子级答案

【问题标题】：Selecting ONLY the last child of a certain class in terms of the parent就父级而言，仅选择某个类的最后一个子级
【发布时间】：2012-05-09 21:12:23
【问题描述】：

我有一些这样的标记：

<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 选择类anchor 的最后一个元素。结果是应该选择<a href="#" class="anchor">Kabul(AFT)</a>。 li 中的 anchor 类可以有任意数量的元素。

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

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

【问题讨论】：

您不能使用 CSS 选择具有特定类的 DOM 中的绝对最后一个元素。将来，您也许可以选择具有某个类的最后一个子元素，但无论结构如何，都不能选择最后一个元素。

标签： html css css-selectors

【解决方案1】：

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

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

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

【讨论】：

不幸的是，我无法更改由后端和其他一些库生成的标记。我的问题中的li 实际上在ul 内，但是当我使用 YUI 时，我正在从问题中的标记中运行此选择。
问题是您需要与 .anchor 类区分的选择器与其他选择器分开，因此浏览器会将每个项目读取为最后一个项目，如jsfiddle example 所示。你真的不能覆盖模板吗？
不，:last-of-type 选择其类型的最后一个元素，而不是其类。

【解决方案2】：

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

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

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

不如 CSS 选择器简洁，但它可以工作。

【讨论】：