:last-of-type不起作用

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元素和最后一个.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.