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

但它没有用。

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个子项。⚠</p>

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

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

Answer 2

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

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

您可以在此代码笔中看到此示例：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 withing 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>