Html 为什么 .class:last-of-type 不像我期望的那样工作？

Why does .class:last-of-type not work as I expect?

提问by ?ystein Amundsen

Why does this not work? http://jsfiddle.net/84C5W/1/

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

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

In fact, none of my <p>elements are visible. If I remove the reference to .visiblein my selector, this does show the last <p>in the div, but this is not what I want.

事实上，我的<p>元素都不可见。如果我.visible在我的选择器中删除对的引用，这会显示<p>div 中的最后一个，但这不是我想要的。

Of course I could only keep one .visibleat all times, but this is for a reveal.js presentation and I do not have control over the JavaScript.

当然，我只能一直保留一个.visible，但这是一个reveal.js 演示文稿，我无法控制JavaScript。

How can I select the last element inside the div WITH the class .visible? I do NOT want to use JavaScript for this.

如何使用类选择 div 中的最后一个元素.visible？我不想为此使用 JavaScript。

回答by Justus Romijn

Your issue is that you're reading :last-of-typeand thinking it works as a :last-of-classselector, when instead it specifically means elements only. There is no selector for the last instance of a class, unfortunately.

您的问题是您正在阅读:last-of-type并认为它可以用作:last-of-class选择器，而实际上它仅表示元素。不幸的是，类的最后一个实例没有选择器。

From the W3C:

来自W3C：

The :last-of-typepseudo-class represents an element that is the last sibling of its type.

的:last-of-type伪类表示是它的类型的最后一个侧边的元件。

You have p.visible:last-of-typeas your selector, which does the following:

你有p.visible:last-of-type你的选择器，它执行以下操作：

1. looks at each list of elements (e.g. 1 or more elements; a child with no siblings can still have :last-of-typeapplied to it) within each containing element in your HTML
2. finds the last element in that list
3. checks to see if it is a <p>element
4. checks to see if it has the class .visibleon it.

1. 查看:last-of-typeHTML 中每个包含元素中的每个元素列表（例如 1 个或多个元素；没有兄弟姐妹的孩子仍然可以应用到它）
2. 找到该列表中的最后一个元素
3. 检查它是否是一个<p>元素
4. 检查它是否有类.visible。

In short, your selector will only apply its styles to a <p>that also hasthe class .visibleon it. In your markup, only the first two <p>elements have that class; the third does not.

简而言之，您的选择器只会将其样式应用于<p>也有该类的a .visible。在您的标记中，只有前两个<p>元素具有该类；第三个没有。

Here's a demo of different styles to illustrate:

这里有一个不同风格的演示来说明：

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;
}

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

Per your ultimate goal,

根据您的最终目标，

How can I select the last element inside the div WITH the class .visible? I do NOT want to use JavaScript for this.

如何使用类 .visible 选择 div 中的最后一个元素？我不想为此使用 JavaScript。

The simplest and most performant way is to invert the way you're trying to apply the styles; instead of trying to hide two out of three divs, where one of the divs to hide has a class and the other div to hide has no class, and the div you want to show shares the same class as the one div you want to hide which alsohas a class (see? that's pretty confusing), do the following:

最简单和最高效的方法是反转您尝试应用样式的方式；而不是试图隐藏三个 div 中的两个，其中一个要隐藏的 div 有一个类，另一个要隐藏的 div 没有类，并且您要显示的 div 与您要隐藏的一个 div 共享相同的类它也有一个类（看到了吗？这很令人困惑），请执行以下操作：

• Only add the class to the element (or group of elements) that's smaller.
• Set the default style for the element to be what you don't want the class to achieve.
• Set the style on the class to be what you want to achieve.

• 仅将类添加到较小的元素（或元素组）。
• 将元素的默认样式设置为您不希望类实现的样式。
• 将类上的样式设置为您想要实现的样式。

p {
    display: none;
}
.visible {
    display: block;
}

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

As you can see from this demo, not only are your HTML and CSS simpler, but this also has the benefit of using only a class selector rather than a *-of-typepseudo-selector, which will make the page load faster (see more on that below).

正如你从这个演示中看到的，你的 HTML 和 CSS 不仅更简单，而且还有一个好处是只使用类选择器而不是*-of-type伪选择器，这将使页面加载更快（请参阅下面的更多内容） .

Why is there no followed byor parent selector?This could potentially bog down the speed of a lot of webpages by changing just one class name dynamically on the page.

为什么没有后跟或父选择器？通过在页面上动态更改一个类名，这可能会降低许多网页的速度。

Dave Hyatt, while working on the WebKit implementation in 2008, mentioned some reasons why these implementations are avoided:

Dave Hyatt 在 2008 年致力于 WebKit 实现时，提到了避免使用这些实现的一些原因：

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.

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.

使用父选择器很容易意外地导致文档范围内的 grovel。人们可以也将会滥用这个选择器。支持它是给人们一大堆绳子来吊死自己。

关于 CSS3 选择器的可悲事实是，如果您关心页面性能，根本不应该使用它们。用类和 id 装饰你的标记，并完全匹配它们，同时避免使用兄弟、后代和子选择器，实际上会使页面在所有浏览器中表现得更好。

回答by Simon Boudrias

The problem is that :last-of-typeonly matches element selector. In your example, you try to match a classselector. That's why it's not working.

问题是:last-of-type只匹配元素选择器。在您的示例中，您尝试匹配class选择器。这就是它不起作用的原因。

An example: http://dabblet.com/gist/4144885

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

回答by Thisismint

Target the second last tag.

定位倒数第二个标签。

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

回答by ?ystein Amundsen

For future reference, this will be covered in CSS level 4: https://www.w3.org/TR/selectors4/#the-nth-last-match-pseudo

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

Browser support at the moment of writing, is non-existant: http://css4-selectors.com/selector/css4/structural-pseudo-class/

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

When this is ready, this should be the solution:

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

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>

回答by Judy Engelsman

this was the way i got around the non-class problem - its a javascript solution unfortunately:

这就是我解决非类问题的方法 - 不幸的是它是一个 javascript 解决方案：

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