Question

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

<style>
   p{
     display : none;
   }
   p.visible:last-of-type {
     display : block;
   }
</style>
<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>

事实上，我的＆lt; p＆gt;都不可见。如果我删除样式表中对“.visible”的引用，则会显示最后一个＆lt; p＆gt;在div中，但这不是我想要的。

当然我总是只能保留一个“.visible”，但这是一个reveal.js演示文稿，我无法控制javascript。只有样式表...

修改：好吧，显然.class：last-of-type不起作用。正如@Justus Romijn所说，：last-of-type伪类仅用于选择元素（在我看来这是非常有限的，并且将这个特定的伪类置于一个或多或少无用的状态）。

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

Answer 1

我做了一些测试，但last-of-type选择器仅适用于节点选择器，而不适用于类名。

HTML：

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

CSS：

p:last-of-type{
  /* this will be applied in the third paragraph bacause the pseudo-selector is applied  to nodes only */
  font-weight: bold;
}
p.visible:last-of-type {
  /* this does not get applied, because you are using the pseudo-selector with a class. */
  display: block;
}

来自W3C：

：last-of-type伪类表示最后一个元素其类型的兄弟在其父元素的子元素列表中。

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

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

Dave Hyatt在2008年开展WebKit实施时mentioned some reasons why these implementations are avoided：

使用父选择器会非常容易意外造成   一个文档范围的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) {}

Answer 5

这是我解决非类问题的方法-不幸的是，这是一个JavaScript解决方案：

function lastOfType(className){
        var allElemsOfType = $("."+className);
        if (!allElemsOfType || !allElemsOfType.length) return null;
        else return allElemsOfType[allElemsOfType.length - 1];
}

Answer 6

在我的情况下，我犯了一个错误。

p.visible : last-of-type (x)
p.visible:last-of-type   (o)

正是我所做的

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

6 个答案: