：最后一个类型不起作用

Question

我有一个带有缩写HTML内容的HTML文档：

<div class="list">
    <form name="signupForm">
      <label class="item item-input">
        <input>
      </label>
      <label class="item item-input">
        <input>
      </label>
      <label class="item item-input">
        <input>
      </label>
      <label class="item item-input">
        <input>
      </label>
      <label class="item item-button">
        <input class="button button-block button-positive">
      </label>
      <label class="item item-button">
        <input class="button button-block button-signup">
      </label>
    </form>
</div>

我的预期行为是CSS选择器.item.item-input:last-of-type将获取label父元素的第4个.item.item-input元素和最后form元素。

我做错了什么？

Answer 1

:last-of-type匹配一个元素，该元素是其（第一级）父级句点中其类型（标记）的最后一个元素。它不知道或不关心您可能合并的其他选择器，包括.item-input等类选择器，或其他任何选择器。

CSS中没有直接的方法可以实现您想要的效果，可以表示为:last-of-selector。已经提出的一些备选方案包括

1. 将前四个元素包装在一个单独的div中，以便您可以在其中执行:last-of-type。

2. 让某人（服务器，本地JS）用特定的类标记您想要的元素，并参考它。

3. 其他黑客行为，例如在您要跳过的末尾硬连接额外元素的数量，并使用:nth-last-of-type。

4. 如果可以管理，则为相关元素提供不同的标记，然后您可以使用last-of-type。

Answer 2

显然:last-of-type（来自MDN文档）只能用于名称空间和type selectors（标记名称选择器，如input）。

我建议您更改HTML结构，将.item-input元素包装在<div>中。或者，我也看到手动添加.last类来替换伪选择器。

Answer 3

找不到.class:last-of-type是不可能的。 :last-of-type CSS伪类表示在其父元素的子元素列表中具有给定元素名称的最后一个兄弟。正确的语法是element:last-of-type

您可能对:nth-last-of-type(n)感兴趣，然后可以使用以下选择器来定位该元素。

label:nth-last-of-type(3) { style properties }

:nth-last-of-type(n)选择器匹配其父元素的特定类型的第n个子元素的每个元素，从最后一个子元素开始计算。

但是，如果您无法编辑标记并且项目数量未修复，则需要使用Javascript。