html - :last-of-type doesn't work

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 将获取第 4 个 label 元素和最后一个 。 form 父项的 item.item-input 元素。

我做错了什么？

Answer 1

:last-of-type 匹配一个元素，该元素是其(第一级)父句点中其类型(标记)的最后一个元素。它不知道也不关心您可能组合了哪些其他选择器，包括类选择器，例如 .item-input 或其他任何东西。

在 CSS 中没有直接的方法来完成你想要的，可以表示为 :last-of-selector。已建议的一些替代方案包括

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

2. 让某人(服务器、本地 JS)用特定类标记您想要的元素，然后引用它。

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

4. 给有问题的元素一个不同的标签，如果你能做到的话，然后你就可以使用last-of-type。