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结构;在某些情况下，它可能是有可能的，在某些情况下它不会。

以下是将.hr排除在最后div之外的一种方式：

div div:last-of-type .hr

以下是将.hr从外div的最后一个孩子中移出的另一种方式：

div :last-child .hr

如果您需要从文档中获取最后一个.hr元素，无论它是什么内容，那么您无法在CSS中执行此操作。在CSS中，您只能在层次结构的某个特定级别选择第一个，最后一个或 n 元素，无论它嵌套在什么类型中，您都无法选择某个类型的最后一个元素。< / p>

Answer 2

div:last-child .hr

Answer 3

以下选择器应该有效：

div *:last-child *:last-child

演示： https://jsfiddle.net/78w3bofg/1/

CSS3获取最后一个元素

3 个答案: