从纯css中已选择的元素中选择最后一个元素答案

【问题标题】：Select last element from already selected elements in pure css从纯css中已选择的元素中选择最后一个元素
【发布时间】：2013-08-18 04:27:37
【问题描述】：

我想要 jquery :last 选择器之类的东西，但在纯 css 中。

如果我不知道它在 DOM 结构中的索引，我怎样才能只得到“z”段！。或者如何获得'.area'类的最后一个孩子？我看到了这个 CSS3 get last element ，但在我的情况下它不起作用，因为我在父元素中有另一个孩子。

p.area:last-child 不行！

我找到了一个解决方案，当我们知道类 .area 有多少元素时。

选择器如下所示：p.area ~ p.area ~ p.area 但是当我们不知道...我想... 只是为了好玩=）

<div>

<h1>This is a heading</h1>
<p class="">The first paragraph.</p>
<p class="area">The x paragraph.</p>
<p class="area">The y paragraph.</p>
<p class="area">The z paragraph.</p>
<p class="">The last paragraph.</p>

</div

【问题讨论】：

很高兴知道您希望它在哪些浏览器中工作？ IE8+ ?
看到这个问题：stackoverflow.com/questions/7298057/…
你知道有多少个区域元素吗？
如果您不知道它在 DOM 中的正确位置，我认为这是一个随机生成的列表？
是的，我不知道有多少具有类 '.area' 的元素，也不知道它在 DOM 结构中的索引。

标签： css css-selectors

【解决方案1】：

如果没有 javascript，您将无法做到这一点。这是the W3C spec的引述：

独立文本和其他非元素节点不计算在内计算元素在其子元素列表中的位置父母。

伪类的目标元素不能用组合器或简单的选择器（如 id 或 class）作为目标。这些类型的伪类称为“Structural Pseudo Classes”。他们会忽略元素上有一个类这一事实，而只是使用 DOM 来确定要定位的正确元素。

在这种情况下，您唯一的选择是使用 nth-child 或 javascript 进行显式定位。

【讨论】：

Pseudo classes target the element and not the class or ID .area:last-of-type 工作是绝对错误的in this case，element 是指你可以通过 DOM 中的选择器选择的元素.在@Chris 的回答下方查看我的评论。
你错了，它是使用选择器来获取元素。那是该列表中的最后一个 p。尝试在该示例中添加另一个没有类的 p，它会中断。此外，在对 Chris 的答案的评论中，这是最后一篇文章元素，再次使用选择器查找元素。
我知道，但我再次强调Pseudo classes target the element and not the class or ID这个说法是错误的。
stackoverflow.com/questions/4811962/…（在 css 中不可能）
@MatthewR。 +1用于修改答案。抱歉，我在"use strict" 模式；）

【解决方案2】：

您应该使用第 n 个孩子，请参阅 here 它是如何工作的。在你的情况下，它应该是：

p.area:nth-child(5){
your style here;
}

浏览器支持请看here。

【讨论】：

"如果我不知道它在 DOM 结构中的索引"
对不起，我只看到了代码和请求，虽然你引用的短语是粗体的，但没有阅读完整的描述:)。