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

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;
}

但它没有起作用。

- user2077308

---

回答你的问题标题，不，CSS中没有与jQuery中的:eq()等效的标准。请参见jQuery difference between :eq() and :nth-child()。 - BoltClock

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) 仅会选择一个。

- Dennis

---

我同意，这看起来有点乏味。 - kabuto178

这并不是唯一的不同之处。实际上，除非HTML受到极限限制，否则此选择器可能会匹配比必要的元素更多，或者根本不匹配。提问者需要确保他们的HTML实际上符合这两个选择器。 - BoltClock

@BoltClock 添加了一个警告 - 我之前考虑过，可能应该加上，因为对于不熟悉它的人来说，差异非常微妙。 - Dennis

那么 (0) 会选择第二个 span 标签，因为它是 n+1.. 对吗？ - Imran Bughio

@ImranBughio 不，:eq(0) 会选择第一个 div 中的第一个 span 元素。:nth-child(1) 会选择每个 div 中的第一个 span 元素。看起来我在我的回答中表述得不太好。 - Dennis

BoltClock是正确的，HTML必须极度受限才能长期运作。我添加了另一个答案，使用了更好的选择器:nth-of-type()。 - David Lopez

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个

元素设置浅蓝色背景，如果你认为以下代码可以实现，请注意这是错误的：

```css .divWrapper div:nth-child(7) { background-color: lightblue; } ```

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

这是因为尽管我们选择的子元素是div，但是:nth-child()实际上计算的不仅是div，还包括该范围内的所有HTML元素作为有效的子元素，因此上面的代码绘制了第6个div而不是第7个，因为它认为中间的<br>标记是有效的子元素。如果您要添加新的HTML元素，则可能会使事情变得非常混乱并破坏您网站的预期设计。

这就是为什么我建议使用:nth-of-type()，如果您要针对CSS类或其他属性进行定位，就像在jQuery中使用:eq()一样。

这样做就可以了：

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

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

希望这能帮到您。

.divWrapper {
  width:100%;
  text-align: center;
}

.divWrapper > div {
  color: white;
  width: 50px;
  height: 20px;
  background: black;
  display: inline-block;
  margin: .5em;
}

/* We paint the first div within divWrapper green. Works fine! So far... */
.divWrapper > div:nth-child(1) {
  background: green;
}

/* We try to paint the 7th div red. It doesn't work, because our selector is not only considering all divs that are childs of divWrapper, but also the <br> tags that are HTML tags which are children of divWrapper  */
.divWrapper > div:nth-child(7) {
  background: red;
}

/* using nth-of-type, our selector DOES paint the 7th div */
.divWrapper > div:nth-of-type(7) {
  background: lightblue;
}

<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>

- David Lopez