前端 - 元素个数不固定情况下如何选择第一个指定类名的子元素？

Question

<div class="main">
<div class="activeBar"></div>
<div class="activeBar"></div>*n
<div class="activeBar"></div>
<div class="item"></div>
<div class="item"></div>*n
<div class="item"></div>
</div>
activeBar 和 item 的数量均不固定，请问能否通过 css 的方法选择到第一个 item

.item:first-child，只适用于父元素第一个且类名为 item 的元素
:first-of-type，只适用于标签

Answer 1

没太看明白问题，反正你要找 .item，跟 .activeBar 就没有关系，直接 .getElementsByClassName('item')[0] 就行了吧。

另外，类名最好不要用驼峰，连接号 .active-bar 更好。

Answer 2

如果 .item 都在同一层级，可以 .item:not(.item ~ .item)

Answer 3

对于您的问题，我们可以使用 CSS 的伪类 :nth-of-type()。这个伪类可以让我们选择特定类型的元素，而不只是第一个。

假设您想选择第一个类名为 item 的元素，您可以这样写：

.item:nth-of-type(1) {  /* 您的样式 */}

在这个例子中，:nth-of-type(1) 表示选择第一个同类型元素。所以，无论父元素中有多少个 item 元素，它都将只选择第一个。

注意：:nth-of-type() 的计数是从1开始的，而不是从0开始。所以 :nth-of-type(1) 指的是第一个元素，:nth-of-type(2) 指的是第二个元素，以此类推。