有一个标准的CSS选择器类似于:jQuery中的eq()吗？

Question

我不知道是否有一个CSS选择器可以像下面的行一样(jQuery代码):

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

我在CSS中尝试过这样的事情:

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

但它不起作用.

Answer 1

虽然jQuery :eq()使用基于0的索引,但:nth-child()使用基于1的索引,因此您需要适当地增加索引:

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

但是你应该考虑重构那个选择器......

⚠值得注意的是,虽然:eq()并且:nth-child()行为相似 - 但它们肯定不一样.:eq()将选择集合中的第n + 1个元素,同时:nth-child()将选择集合中作为其各自父母的第n个子元素的所有元素.⚠

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

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

Answer 2

最佳答案仅在非常严格的情况和有限的 HTML 结构下才有效。当您尝试通过 CSS 类或其他特征选择元素时，这会导致问题。让我在下面的代码中解释一下：

<div class="divWrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <br>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <br>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

假设我们想要在.divWrapper浅蓝色背景中提供第 7 个 div，如果您认为这可行，那么您就错了：

.divWrapper > div:nth-child(7) {
  background: lightblue;
}

发生这种情况是因为，即使我们选择了 div 子级，:nth-child()实际上不仅将 div 计算在内，而且将该范围内的所有 HTML 元素都算作有效子级，因此上面的代码绘制了第 6 个 div 而不是第 7 个，因为它考虑了<br>中间的标签作为一个合格的孩子。如果您要添加新的 HTML 元素，这可能会使事情变得非常混乱并破坏网站的预期设计。

这就是为什么我建议使用:nth-of-type()替代方法，如果您尝试定位 CSS 类或其他属性，就像:eq()在 jQuery 中一样。

这完成了工作：

.divWrapper > div:nth-of-type(7) {
  background: lightblue;
}

您可以在此 codepen 中查看此示例： https: //codepen.io/techbawz/pen/ZEYpBPe，或者您可以直接在此答案上运行代码。

希望这可以帮助。

<div class="divWrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <br>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <br>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

.divWrapper > div:nth-child(7) {
  background: lightblue;
}