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 的 所有 元素他们各自父母的孩子。 ⚠

<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 类或其他属性，就像在jQuery 中使用:eq()。

这样就可以了：

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