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

Posted 2023-03-05

【中文标题】jQuery 中是不是有类似于 :eq() 的标准 CSS 选择器？

【英文标题】：Is there a standard CSS selector similar to :eq() in jQuery?jQuery 中是否有类似于 :eq() 的标准 CSS 选择器？

【发布时间】：2013-02-07 14:04:20

【问题描述】：

不知道有没有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;

但是没有用。

【问题讨论】：

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

【参考方案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) 只会选择一个。

【讨论】：

我同意，这看起来确实有点乏味

这不是唯一的区别。事实上，除非 html 受到极大限制，否则此选择器可能会匹配比必要更多的元素 - 或者 根本不匹配。 OP 需要确保他们自己的 HTML 实际上匹配两个选择器。

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

所以 eq:(0) 将选择第二个 span 标签，因为它的 n+1.. 对吗？

@ImranBughio 不，:eq(0) 将选择第一个 div 中的第一个 span 元素。 :nth-child(1) 将选择每个 div 中的第一个 span 元素。看起来我的回答很糟糕。

【参考方案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>