为什么.class:last-of-type不能按我预期的那样工作? [英] Why does .class:last-of-type not work as I expect?

问题描述

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

Why does this not work? 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>

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

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

当然我只能一直保留一个.visible，但这是为一个show.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.

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

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

推荐答案

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

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

从 W3C :

:last-of-type伪类表示一个元素，该元素是其类型的最后一个同级.

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

您将p.visible:last-of-type作为选择器，它将执行以下操作:

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

1. 查看HTML中每个包含元素中的每个元素列表(例如1个或多个元素；没有同级的孩子仍然可以应用:last-of-type)
2. 找到该列表中的最后一个元素
3. 检查是否为<p>元素
4. 检查它是否具有类.visible.

1. looks at each list of elements (e.g. 1 or more elements; a child with no siblings can still have :last-of-type applied 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 .visible on it.

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

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

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

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>

按照您的最终目标，

如何使用.visible类选择div中的最后一个元素?我不想为此使用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中的两个，其中要隐藏的一个div有一个类，要隐藏的另一个div没有类，并且要显示的div与要隐藏的一个div共享同一类哪个也有一个类(请参阅?这很令人困惑)，请执行以下操作:

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 also has a class (see? that's pretty confusing), do the following:

• 仅将类添加到较小的元素(或元素组)中.
• 将元素的默认样式设置为您不希望类实现的样式.
• 将类的样式设置为您想要实现的样式.

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>

从此演示中可以看到，不仅HTML和CSS更简单，而且还具有仅使用类选择器而不是*-of-type伪选择器的好处，这将使页面加载更快(详情请见下文.

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-type pseudo-selector, which will make the page load faster (see more on that below).

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

Why is there no followed by or 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在2008年研究WebKit实现时，提到了一些避免这些实现的原因:

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

使用父选择器，很容易导致意外 整个文档范围内的问题.人们会并且会滥用该选择器. 支持它可以使人们绞尽脑汁吊死自己 与.

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选择器的可悲事实是，它们实际上不应该是 如果您关心页面性能，则完全可以使用.装饰您的标记 与类和id并完全匹配那些，同时避免所有 使用同级，后代和子选择器实际上会产生 页面在所有浏览器中的表现都明显更好.

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屋！