在元素个数不固定的情况下，如何通过CSS选择第一个指定类名的子元素？

精准定位：css选择不确定数量子元素中的第一个目标元素

在html结构中，当父元素包含数量不定的子元素，且需要选中特定类名的第一个子元素时，传统的css选择器如:first-child和:first-of-type便显得力不从心。 本文将介绍一种更精准高效的方法，利用:nth-child选择器实现这一目标。

假设存在如下HTML结构，其中activebar和item元素的数量是动态变化的：

<div class="main">   <div class="activebar"></div>   <div class="activebar"></div>   <div class="activebar"></div>   <div class="item"></div>   <div class="item"></div>   <div class="item"></div> </div>

我们希望仅样式化第一个拥有item类的元素。 item:first-child无法满足需求，因为它只能选择父元素的第一个子元素，而这个子元素必须是item类。 :first-of-type也行不通，因为它只选择特定标签类型的第一个元素。

解决方法是巧妙地运用:nth-child选择器结合of关键字：

立即学习“前端免费学习笔记（深入）”；

.main > .item:nth-child(n of .item) {   /* 你的样式 */ }

其中n代表序号，这里我们选择第一个，所以n为1：

.main > .item:nth-child(1 of .item) {   /* 你的样式 */ }

这个选择器nth-child(1 of .item) 的含义是：在.main元素的所有子元素中，选择第一个类名为item的元素。 of .item限定了选择范围，只在item类元素中寻找第一个。 因此，无论activebar元素有多少个，它都能准确地选中第一个item元素。

这种方法的优势在于它对子元素数量的变化不敏感，只关注目标类名的元素顺序，从而确保了选择器的精准性和可靠性。