CSS3 获取最后一个元素

Question

如何从以下代码中获取最后一个元素 (hr):

<div>
    <div>
        <span class="hr"></span>
    </div>

    <div>
        <span class="hr"></span>
    </div>

    <div>
        <span class="hr"></span> <!-- I need this -->
    </div>
</div>

.hr:last-child 不适用于此。

当然，DOM 结构可能更复杂。我只需要获取最后需要的元素。

Answer 1

你的问题不是很清楚；有几种方法可以从您的示例中获取最后一个 .hr 元素，但是您说“DOM 结构可能更复杂”。为了回答您的问题，您需要提及您可能拥有的 DOM 结构；在某些情况下可能是可能的，而在某些情况下则不可能。

这是从最后一个 div 中获取 .hr 的一种方法:

div div:last-of-type .hr

这是从外部 div 的最后一个子元素中获取 .hr 的另一种方法:

div :last-child .hr

如果您需要从文档中取出最后一个 .hr 元素，而不管它里面有什么，那么您不能在 CSS 中这样做。在 CSS 中，您只能在层次结构的一个特定级别选择第一个、最后一个或第 n 个元素，您不能选择某种类型的最后一个元素，无论它嵌套在什么中。