Css 为什么 .class：lastoftype 不能按我的预期工作

你的问题是，你读的是:last-of-type，并认为它是一个:last-of-class Select 器，而实际上它具体表示的是elements only.遗憾的是，类的最后一个实例没有 Select 器.

从W3C人中:

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

您的 Select 器为p.visible:last-of-type，它执行以下操作:

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

简而言之，您的 Select 器将只将其样式应用于其上的类.visible的<p> that also has.在您的标记中，只有前两个<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>

根据你的最终目标，

如何 Select div内的最后一个元素，其类为.Visible？我不想为此使用JavaScript.

最简单和最有效的方法是颠倒您试图应用样式的方式；而不是try 隐藏三个div中的两个，其中一个要隐藏的div有一个类，另一个要隐藏的div没有类，并且您想要显示的div与您想要隐藏的also个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更简单，而且这还具有仅使用类 Select 器而不是*-of-type伪 Select 器的好处，这将使页面加载更快(请参见下面的更多内容).

Why is there no followed by or parent selector?个 这可能会通过动态更改页面上的一个类名来潜在地降低许多网页的速度.

Dave Hyatt在2008年致力于WebKit实施时，mentioned some reasons why these implementations are avoided:

有了父 Select 器，意外导致

关于CSS3 Select 器的可悲事实是，它们实际上不应该 如果您关心页面性能，则完全可以使用.装饰您的标记 使用类和ID进行匹配，并仅对其进行匹配，同时避免所有 使用同级 Select 器、子代 Select 器和子级 Select 器实际上会使 页面在所有浏览器中的性能都要好得多.