如何用 CSS 选择特定类别下的最后一个子元素

在网页设计和前端开发中，常常会遇到需要对特定类别下的最后一个子元素进行样式调整的需求。熟练掌握用 CSS 选择特定类别下的最后一个子元素的方法，能让页面布局和样式呈现更加精准、美观。

首先要了解的是通用选择器 :last-child。它可以选中父元素的最后一个子元素。例如，有一个包含多个列表项的无序列表，HTML 代码如下：

<ul class="myList">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

若要对 myList 类下的最后一个列表项进行样式设置，比如将其文本颜色设为红色，CSS 代码可以这样写：

.myList li:last-child {
  color: red;
}

然而，:last-child 有个局限性，它选择的是父元素的最后一个子元素，不论其元素类型。如果只想选择特定类别的最后一个子元素，就要用到 :last-of-type 选择器。例如，在一个包含多种元素的 div 中：

<div class="myDiv">
  <p>段落 1</p>
  <span>文本 1</span>
  <p>段落 2</p>
</div>

若要选中 myDiv 中最后一个 p 元素并设置样式，比如让字体加粗，CSS 代码如下：

.myDiv p:last-of-type {
  font-weight: bold;
}

还有一种情况，当 HTML 结构较为复杂，需要更精准定位时，可以结合属性选择器。假设 HTML 代码如下：

<div class="parent">
  <div class="child blue">子元素 1</div>
  <div class="child blue">子元素 2</div>
  <div class="child green">子元素 3</div>
</div>

若想选择 parent 类下 blue 类的最后一个子元素，将其背景色设为黄色，CSS 代码可以写成：

.parent.blue:last-of-type {
  background-color: yellow;
}

掌握这些 CSS 选择特定类别下最后一个子元素的技巧，能有效提升前端开发效率。无论是简单的列表样式调整，还是复杂页面布局中的细节优化，都能精准地实现所需的样式效果，为用户带来更优质的视觉体验。