在CSS样式开发中，经常需要针对父元素下符合特定条件的直接子元素设置样式，其中选取父元素下特定类的最后一个直接子元素是比较常见的需求，掌握正确的选择器写法能大幅提升开发效率。
核心选择器语法
要实现选取父元素下特定类的最后一个直接子元素，需要组合使用直接子元素选择器、类选择器和:last-child伪类，完整语法格式如下：
父元素选择器 > .特定类名:last-child {
/* 样式规则 */
}
这里需要注意三个部分的含义：>表示只匹配直接子元素，不会选中嵌套的后代元素；.特定类名用于筛选带有对应类的元素；:last-child伪类会匹配父元素下的最后一个子元素，三者组合就能精准定位到目标元素。
代码示例演示
假设我们有一个类名为container的父元素，内部有多个直接子元素，其中部分子元素带有item类，现在需要给最后一个带item类的直接子元素设置红色边框，HTML结构如下：
<div class="container">
<div class="item">第一个item</div>
<div class="item">第二个item</div>
<div class="other">其他元素</div>
<div class="item">第三个item</div>
</div>
对应的CSS选择器写法为：
.container > .item:last-child {
border: 2px solid red;
}
这段样式只会作用于container下最后一个带item类的直接子元素，也就是第三个item元素，不会影响到other元素，也不会选中嵌套在item内部的后代元素。
常见误区说明
很多开发者会误用:last-of-type伪类来实现该需求，但是:last-of-type是基于元素类型匹配的，和类名无关，如果写成.container > .item:last-of-type，会匹配父元素下最后一个div类型的带item类的元素，当父元素下最后一个子元素不是div或者没有item类时，就会出现匹配错误。
另外需要注意，:last-child要求目标元素必须是父元素的最后一个子元素，如果父元素的最后一个子元素没有对应的特定类，那么.特定类名:last-child就不会匹配到任何元素，这是该选择器的固有特性，使用时需要确认父元素的子元素结构是否符合要求。
兼容性与扩展
该选择器组合在现代浏览器中都有很好的支持，包括Chrome、Firefox、Edge等主流浏览器，如果需要兼容非常老旧的浏览器，可以通过给目标元素额外添加一个专属类来设置样式，不过这种方式会增加HTML的维护成本。
如果需求是选取父元素下特定类的最后一个子元素（不限制直接子元素），只需要去掉直接子元素选择器>，写法为父元素选择器 .特定类名:last-child，此时会匹配所有后代中符合条件的最后一个元素。