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

Question

我想要一些像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

Answer 1

你不能没有javascript。以下是the W3C spec的引用：

  

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

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

您唯一的选择是在此实例中使用nth-child或javascript进行显式定位。

Answer 2

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

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

对于浏览器支持，请查看here。