你可能不清楚的 CSS 选择器用法（一）

人类社会的发展离不开编程语言的功劳，计算机语言中常使用 CSS 选择器，它是 CSS 语言中用来选择 HTML 元素的一种语法规则，可通过各种方式匹配 HTML 元素。由于 CSS 选择器丰富多样，有些可能存在理解上的盲区，这篇文章将带领大家揭开选择器用法中的奥秘，首先从 :last-child 和 :last-of-type 两个伪类选择器入手，对这两个常被混淆的概念进行分析。

1. :last-child 选择器
:last-child 选择器顾名思义，就是选择父元素下的最后一个子元素。举个例子，以下 HTML 代码中，我们希望将 <li> 元素的最后一个子元素 <span> 变为红色。

<ul>
  <li>
    <span>Item 1</span>
  </li>
  <li>
    <span>Item 2</span>
  </li>
  <li>
    <span>Item 3</span>
  </li>
</ul>

使用 :last-child 选择器，我们可以这样编写 CSS 样式：

li:last-child span {
  color: red;
}

经过这样的设置后，页面中的 <span>Item 3</span> 元素将被变为红色，而 <span>Item 1</span> 和 <span>Item 2</span> 则不受影响。

2. :last-of-type 选择器
:last-of-type 选择器与 :last-child 选择器非常相似，它们之间的区别在于，:last-of-type 选择器仅选择父元素下同类型的最后一个子元素。以下还是刚才那个例子，我们希望只改变 <ul> 元素中的最后一个 <li> 元素的颜色，其子元素不受影响。

<ul>
  <li>
    <span>Item 1</span>
  </li>
  <li>
    <span>Item 2</span>
  </li>
  <li>
    <p>Item 3</p>
  </li>
</ul>

使用 :last-of-type 选择器，我们可以编写以下 CSS 样式：

ul:last-of-type li {
  color: red;
}

这个样式将导致 <ul> 元素中的最后一个 <li> 元素及其子元素 <span> 都变成红色，而 <p> 元素不受影响。

3. 总结
总而言之，:last-child 选择器和 :last-of-type 选择器的区别在于，:last-child 选择器选择父元素下的最后一个子元素，而 :last-of-type 选择器仅选择父元素下同类型的最后一个子元素。在实际使用中，我们可以根据具体需求选择合适的伪类选择器。