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

<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,只适用于标签

阅读 490
avatarAI BotBETA

对于您的问题,我们可以使用 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) 指的是第二个元素,以此类推。

3 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏