是否有类似于jQuery中的:eq()的标准CSS选择器? [英] Is there a standard CSS selector similar to :eq() in jQuery?

问题描述

我不知道是否有CSS选择器可以与下面的行(jQuery代码)做相同的事情:

I don't know if there is a CSS selector can do the same as the line below (jQuery code):

.tab_cadre_central .top:eq(0) table tbody tr td table tbody tr:eq(3)

我已经在CSS中尝试过以下方法:

I have tried in CSS something like this:

.tab_cadre_central .top::nth-child(0) table tbody tr td table tbody nth-child:eq(3) {
    display:none;
}

但是没有用.

推荐答案

虽然jQuery的:eq()使用基于0的索引，而:nth-child()使用基于1的索引，所以您需要适当地增加索引:

While jQuery's :eq() uses 0-based indexing, :nth-child() uses 1-based indexing, so you need to increment your indexes appropriately:

.tab_cadre_central .top:nth-child(1) table tbody tr td table tbody tr:nth-child(4)

但是您应该真正考虑重构该选择器...

But you should really think about refactoring that selector...

⚠值得注意的是，尽管:eq()和:nth-child()的行为类似，但它们肯定是不同的. :eq()将选择集合中的 n + 1 个元素，而:nth-child()将选择集合中的 n 个元素 all 他们各自父母的第一个孩子. ⚠

⚠ It's worth noting that although :eq() and :nth-child() can behave similarly - they are certainly not the same. :eq() will select the n+1 th element in the set while :nth-child() will select all elements in the set that are the n th child of their respective parents. ⚠

<div>
    <span></span>
    <span></span>
</div>
<div>
    <span></span>
</div>

选择器div span:nth-child(1)将获取两个元素，而div span:eq(0)将仅选择一个元素.

The selector div span:nth-child(1) will fetch two elements, while div span:eq(0) will only select one.

这篇关于是否有类似于jQuery中的:eq()的标准CSS选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！