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

  • Z时代
  • 2024-01-10
  • 分类：问答

为什么这不起作用？

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，但这只是一个reveal.js演示文稿，我无法控制JavaScript。

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

回答：

您的问题是，您正在阅读:last-of-type并认为它可以用作:last-of-class选择器，而实际上它 仅 表示 元素

。不幸的是，没有用于类的最后一个实例的选择器。

从W3C：

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

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

  1. 查看:last-of-typeHTML中每个包含元素中的每个元素列表（例如1个或多个元素；没有兄弟姐妹的孩子仍然可以应用到它）

  2. 在列表中找到最后一个元素

  3. 检查它是否是一个<p>元素

  4. 检查是否具有该类.visible。

简而言之，您的选择器只会将其样式应用于<p>同时具有 类的.visible。在您的标记中，只有前两个<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;

    }

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

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

通过仅动态更改页面上的一个类名称，这可能会降低许多网页的速度。

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

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

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

以上是 为什么.class：last-of-type无法正常工作？ 的全部内容， 来源链接： utcz.com/qa/428773.html

回到顶部