2023/07-01——解除对 :last-of-type 的误会

[HannibalKcc]

css 选择器中 :last-of-type，我几乎没有使用过。最近有人问相关问题，确实是刷新了我对这个选择器的认知。

type 指的是元素的标签类型，与前缀没有关系。比如

<div>
  <p class="foo">1</p>
  <p class="foo">1</p>
  <p class="foo">1</p>
  <p>命中</p>
  <button>2</button>
  <button class="foo">命中</button>
<div>

// 先按照 div .foo 找到所有命中的元素，查看它们的标签类型，然后选择兄弟组件里最后一个相同类型的标签
// 如果命中的元素有多种标签类型，那么会选中个标签，具体可以看 MDN example
div .foo:last-of-type {
 background-color: red;
}

MDN