<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
</ul>

如果我们想要单独为倒数第三个

li:nth-last-of-type(3) {
  color: red;
  font-weight: bold;
}

这样，在浏览器中呈现时，“列表项3” 就会显示为红色且字体加粗，而其他列表项不受影响。

这个伪类选择器在实际项目中有着广泛的应用场景。在网页布局中，对于一组同类型的元素，我们可能需要对特定位置的元素进行差异化设计。比如在一个产品展示列表中，倒数第三个产品可能是重点推荐产品，我们可以使用 :nth-last-of-type(3) 为其添加特殊的边框、背景色等样式，吸引用户的注意力。

在响应式设计中，随着屏幕尺寸的变化，元素的数量和排列可能会有所改变。使用 :nth-last-of-type(3) 伪类选择器能够确保在不同布局下，始终能精准地定位并设置倒数第三个同类型元素的样式，保持页面设计的一致性和灵活性。

掌握 :nth-last-of-type(3) 伪类选择器，能让我们在前端开发中更加高效地控制页面样式，为用户带来更出色的视觉体验。