为什么.class：last-of-type无法正常工作？

为什么.class：last-of-type无法正常工作？

您的问题是，您正在阅读

:last-of-type

并认为它可以用作

:last-of-class

选择器，而实际上它 仅 表示 元素
。不幸的是，没有用于类的最后一个实例的选择器。

从W3C：

的

:last-of-type

伪类表示是它的类型的最后一个侧边的元件。

您将

p.visible:last-of-type

作为选择器，它执行以下 *** 作：

1. 查看

   :last-of-type

   HTML中每个包含元素中的每个元素列表（例如1个或多个元素；没有兄弟姐妹的孩子仍然可以应用到它）
2. 在列表中找到最后一个元素
3. 检查它是否是一个

   <p>

   元素
4. 检查是否具有该类

   .visible

   。

简而言之，您的选择器只会将其样式应用于

<p>

同时具有 类的

.visible

。在您的标记中，只有前两个

<p>

元素具有该类。第三不。

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

p:last-of-type {    color: green;}p.visible:last-of-type {    color: red;}<p >First paragraph.</p><p >Second paragraph.</p><p>Third paragraph.</p>

按照您的最终目标，

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

最简单，最高效的方法是颠倒您尝试应用样式的方式。而不是尝试隐藏三个div中的两个，其中要隐藏的一个div有一个类，要隐藏的另一个div没有类，并且要显示的div与要隐藏的一个div共享同一类其中
也 有一个类（请参阅？这很令人困惑），请执行以下 *** 作：

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

• 将类的样式设置为您想要实现的样式。

  p {

  display: none;

  }

  .visible {

  display: block;

  }

  <p>This should be hidden</p><p >This should be displayed</p><p>This should be hidden</p>

从该演示中可以看到，不仅HTML和CSS更简单，而且还具有仅使用类选择器而不是

*-of-type

伪选择器的好处，这将使页面加载更快（请参见下文） 。

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

DaveHyatt在2008年研究WebKit实现时，提到了避免使用这些实现的一些原因：

使用父选择器，意外地导致文档范围内的混乱变得非常容易。人们会并且会滥用该选择器。支持它可以使人们绞尽脑汁。

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