为什么.class：last-of-type不工作？ [英] Why does .class:last-of-type not work?
问题描述
为什么这样无效？ 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>
事实上，我的所有< p>都不可见。如果我删除样式表中对.visible的引用，则会显示最后一个< p>在div中，但这不是我想要的。
In fact, none of my <p>'s are visible. If I remove the reference to ".visible" in the stylesheet, this does show the last <p> in the div, but this is not what I want.
当然，我只能保持一个.visible在任何时候，但这是一个reveal.js演示和我没有控制的javascript。只有样式表...
Of course I could only keep one ".visible" at all times, but this is for a reveal.js presentation and I do not have control over the javascript. Only the stylesheet...
编辑：
好吧，所以显然.class：last-of-type不工作。正如@Justus Romijn所提出的：最后一个类型伪类被设计用于选择元素（在我看来是非常有限的，并将这个特定的伪类放在或多或少的无用状态）。
Edit: Ok, so obviously .class:last-of-type does not work. As put by @Justus Romijn, the :last-of-type pseudo class was designed for selecting elements only (which in my opinion is enormously limiting, and places this particular pseudo class in a more or less useless state).
无论如何，我想在这一点上改写我的问题：我如何选择div中最后一个元素与类.visible？我不想使用Javascript这个。
Anyway, I want to rephrase my question at this point: How can I select the last element inside the div WITH the class ".visible"? I do NOT want to use Javascript for this.
推荐答案
我做了一些测试，但
I did some testing, but the last-of-type selector only works on node-selectors, not classnames.
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 ：
-of-type伪类表示一个元素，它是其父元素的子元素列表中其类型的最后
同级。
The :last-of-type pseudo-class represents an element that is the last sibling of its type in the list of children of its parent element.
因为它必须是一个兄弟，所以它忽略类名可能是因为那样你可以与其他元素混合。
Because it has to be a sibling, it ignores classnames probably because then you can mix it up with other elements.
之后可以通过在页面上动态更改一个类名来潜在地锁定很多网页。
Why is there no followed by or parent selector? This could potentially memory-lock a lot of webpages by changing just one classname dynamically on the page. Making extensive use of CSS3 selectors is already heavy on the browser and not recommended.
Dave Hyatt在2008年的WebKit实现上工作时，提到了避免这些实现的一些原因：
Dave Hyatt, while working on the WebKit implementation in 2008, mentioned some reasons why these implementations are avoided:
对于父选择器，变得非常容易意外导致
a document-wide grovel。人们可以并将会滥用此选择器。
支持它给人们一大堆绳子自己挂自己
与
With parent selectors it becomes extremely easy to accidentally cause a document-wide grovel. People can and will misuse this selector. Supporting it is giving people a whole lot of rope to hang themselves with.
CSS3选择器的悲哀的真相是，他们真的应该' t be
如果你关心页面的性能。装饰你的标记
与类和ids和匹配纯粹，同时避免所有的
使用兄弟，子孙和子选择器实际上会使一个
页面在所有浏览器中表现更好。
The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.
这篇关于为什么.class：last-of-type不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
