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

Question

我想要像jquery :last选择器,但在纯css.

如果我不知道它在DOM结构中的索引,我怎么才能得到'z'段落!.或者如何获得班级'.area'的最后一个孩子？我看到这个CSS3获取最后一个元素,但它在我的情况下不起作用,因为我在父元素中有另一个子元素.

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就无法做到这一点.以下是W3C规范的引用:

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

伪类目标元素不能用组合器或简单选择器(如id或class)作为目标.这些类型的伪类称为" 结构伪类 ".他们将忽略这样一个事实:元素上有一个类,只需使用DOM来确定要定位的正确元素.

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