CSS 伪类选择器 :last-child :last-of-type

:last-child

语法

:last-child {
  /* ... */
}

示例

<li>4</li>将获得样式。

li:last-child {
  border: 2px solid orange;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

:last-of-type

表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。

语法

:last-of-type {
  /* ... */
}

示例

空格选择会作用与p标签下的所有em。

相同层级的元素em只有最后一个有样式。

p em:last-of-type {
  color: lime;
}

<p>
  <em>我没有颜色 :(</em><br />
  <span><em>我有颜色！</em></span><br />
  <strong>我没有颜色 :(</strong><br />
  <em>我有颜色 :D</em><br />
  <span>
    <em>我在子元素里，但没有颜色！</em><br />
    <span style="text-decoration:line-through;"> 我没有颜色 </span><br />
    <em>我却有颜色！</em><br /> </span
  ><br />
  <strong>我也没有颜色 :(</strong>
</p>

参考文档

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type