CSS3 获取最后一个元素答案

【问题标题】：CSS3 get last elementCSS3 获取最后一个元素
【发布时间】：2015-05-22 06:29:38
【问题描述】：

如何从以下代码中获取最后一个元素 (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 结构可能更复杂。我只需要获取最后需要的元素。

【问题讨论】：

标签： css css-selectors

【解决方案1】：

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

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

div div:last-of-type .hr

这是从外部div 的最后一个孩子中取出.hr 的另一种方法：

div :last-child .hr

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

【讨论】：

很棒的帖子。 dless of what it's inside, then you can't do that in CSS，5 年后，还是一样吗？只是好奇，谢谢！
我认为这方面没有任何改变。 CSS Selectors Level 4 扩展了 :nth-last-child() 和 :nth-last-of-type() 以允许指定一个额外的选择器来限制您要匹配的元素集，因此您可以从具有 @987654336 的一组兄弟元素中选择类为 .hr 的最后一个元素@。但是，它们不允许选择文档中的所有元素，只能从公共父元素的兄弟元素中选择。而且我认为还没有浏览器支持这种语法；这是草稿
Previous drafts of CSS Selectors Level 4 有一个 :nth-last-match(1 of .hr) 伪类，可以满足原始问题的要求，但它被删除了，可能是因为实施起来不切实际。
啊，我明白了。 :nth-match 和 :nth-last-match 刚刚被替换为 :nth-child 的新语法；他们从来都不是为了选择任意后代，只是单亲的兄弟姐妹。有关解释，请参见 this message：“我认为 [:nth-child()] 更清楚。:nth-match() 可以解释为与树匹配，而不仅仅是与孩子匹配”

【解决方案2】：

div:last-child .hr

【讨论】：

那么你应该在那些包含div元素的元素上放置class之类的东西来标识该元素的类型。完成后，将div 更改为.class。

【解决方案3】：

以下选择器应该可以工作：

div *:last-child *:last-child

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

【讨论】：