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

Question

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

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

p.area:last-child没用！

当我们知道 class 有多少元素时，我找到了一个解决方案.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 进行显式定位。

Answer 2

你应该使用第 n 个孩子，看看这里是如何工作的。在你的情况下，它应该是：

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

浏览器支持看这里。