为什么.class:last-of-type不起作用？

Question

为什么这不起作用？http://jsfiddle.net/84C5W/1/

p{
    display: none;
}
p.visible:last-of-type {
    display: block;
}

事实上,我的<p>都不可见.如果我删除了样式表中对".visible"的引用,这确实显示了div中的最后一个<p>,但这不是我想要的.

当然,我只能随时保留一个".visible",但这是一个reveal.js演示文稿,我无法控制javascript.只有样式表......

编辑:好的,很明显.class:last-of-type不起作用.正如@Justus Romijn所说,:last-of-type伪类仅用于选择元素(在我看来这是非常有限的,并且将这个特定的伪类置于一个或多或少无用的状态).

无论如何,我想在这一点上重新解释我的问题:如何选择div中的最后一个元素".visible"？我不想为此使用Javascript.

Answer 1

我做了一些测试,但:last-of-type选择器只适用于节点选择器,而不是类名.

HTML:

p:last-of-type {
  /* this will be applied in the third paragraph because the pseudo-selector checks for nodes only */
  color: green;
}
p.visible:last-of-type {
  /* this does not get applied, because you are using the pseudo-selector with a specific class in addition to the node type. */
  color: red;
}

CSS:

<p class="visible">First paragraph.</p>
<p class="visible">Second paragraph.</p>
<p>Third paragraph.</p>

来自W3C:

:last-of-type伪类表示一个元素,它是其父元素子元素列表中其类型的最后一个兄弟.

因为它必须是兄弟,它会忽略类名,可能因为那时你可以将它与其他元素混合起来.

为什么没有后跟或父选择器？ 通过在页面上动态更改一个类名,这可能会对大量网页进行内存锁定.广泛使用CSS3选择器在浏览器上已经很重,不推荐使用.

Dave Hyatt在2008年开展WebKit实施时,提到了避免这些实现的一些原因:

使用父选择器,很容易意外地导致文档范围的grovel.人们可以并且将会滥用这个选择器.支持它是为了给人们提供大量的绳索.

关于CSS3选择器的可悲事实是,如果你关心页面性能,它们根本就不应该被使用.使用类和ID来装饰标记并完全匹配这些标记,同时避免使用兄弟,子孙和子选择器,这实际上会使页面在所有浏览器中都表现得更好.

Answer 2

问题是:last-of-type只匹配元素选择器.在您的示例中,您尝试匹配class选择器.这就是为什么它不起作用.

一个例子:http://dabblet.com/gist/4144885

Answer 3

为了将来参考，这将在 CSS 级别 4 中涵盖：https : //www.w3.org/TR/selectors4/#the-nth-last-match-pseudo

在撰写本文时，浏览器支持不存在：http : //css4-selectors.com/selector/css4/structural-pseudo-class/

准备好后，这应该是解决方案：

p {
  display : none;
}
p.visible:nth-last-match(0) {
  display : block;
}

<div>
  <p class="visible">This should be hidden</p>
  <p class="visible">This should be displayed</p>
  <p class="">This should be hidden</p>
</div>

Answer 4

定位倒数第二个标签。

.visible:nth-last-of-type(2) {}