80

为什么这不起作用？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，这确实会显示<p>div 中的最后一个，但这不是我想要的。

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

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

4

5 回答 5

136

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

来自W3C：

:last-of-type伪类表示一个元素，它是其类型的最后一个兄弟元素。

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

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

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

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

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。

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

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

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伪选择器的好处，这将使页面加载更快（见下文） .

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

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

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

关于 CSS3 选择器的可悲事实是，如果您关心页面性能，则根本不应该使用它们。用类和 id 装饰您的标记并仅在这些上进行匹配，同时避免使用兄弟、后代和子选择器，实际上会使页面在所有浏览器中的性能显着提高。

于 2012-11-25T19:37:49.603 回答
9

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

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

于 2012-11-25T19:32:48.040 回答
8

定位倒数第二个标签。

.visible:nth-last-of-type(2) {}
于 2017-07-16T04:26:10.037 回答
6

为了将来参考，这将在 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>

于 2017-05-31T10:12:21.250 回答
0

这就是我解决非类问题的方法——不幸的是，这是一个 Javascript 解决方案：

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

lastOfType('visible').style.display = 'block'
.visible {
  display: none;
}

p {
  display: none;
}
<p class='visible'>1</p>
<p class='visible'>2</p>
<p>3</p>

于 2019-09-10T07:59:38.197 回答