jQuery 中是否有类似于 :eq() 的标准 CSS 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15015971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a standard CSS selector similar to :eq() in jQuery?
提问by user2077308
I don't know if there is a CSS selector can do the same as the line below (jQuery code):
我不知道是否有一个 CSS 选择器可以做与下面这行相同的事情（jQuery 代码）：
.tab_cadre_central .top:eq(0) table tbody tr td table tbody tr:eq(3)
I have tried in CSS something like this:
我在 CSS 中尝试过这样的事情：
.tab_cadre_central .top::nth-child(0) table tbody tr td table tbody nth-child:eq(3) {
display:none;
}
but it didn't work.
但它没有用。
回答by Dennis
While jQuery's :eq()uses 0-based indexing, :nth-child()uses 1-based indexing, so you need to increment your indexes appropriately:
虽然 jQuery:eq()使用基于 0 的索引，但:nth-child()使用基于 1 的索引，因此您需要适当地增加索引：
.tab_cadre_central .top:nth-child(1) table tbody tr td table tbody tr:nth-child(4)
But you should really think about refactoring that selector...
但是你真的应该考虑重构那个选择器......
? It's worth noting that although :eq()and :nth-child()can behave similarly - they are certainly not the same. :eq()will select the n+1th element in the set while :nth-child()will select allelements in the set that are the nth child of their respective parents. ?
? 值得注意的是，虽然:eq()和:nth-child()可以表现相似 - 它们肯定不一样。:eq()将选择集合中的第n+1个元素，同时:nth-child()将选择集合中作为其各自父项的第n个子元素的所有元素。?
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
</div>
The selector div span:nth-child(1)will fetch two elements, while div span:eq(0)will only select one.
选择器div span:nth-child(1)将获取两个元素，而div span:eq(0)只会选择一个。
回答by David Lopez
The top answer will only work under very strict circumstances and a limited HTML structure. It will lead to issues when you are trying to select elements by a CSS class or other trait. Let me explain, in the following code:
最佳答案仅适用于非常严格的情况和有限的 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>
Let's say we want to give the 7th div within .divWrappera light blue background, if you thought this would work, you are wrong:
假设我们想给第 7 个 div.divWrapper一个浅蓝色背景，如果你认为这会奏效，那你就错了：
.divWrapper > div:nth-child(7) {
background: lightblue;
}
This happens because even though we selected children that are divs, :nth-child()actually counts not only divs, but all HTML elements within that scope as valid children, therefore the code above paints the 6th div instead of the 7th, because it considered the <br>tag in-between as a valid child. This can make things very confusing and break the intended design of your website if you were to add new HTML elements.
发生这种情况是因为即使我们选择了 div 的孩子，:nth-child()实际上不仅将 div 计算在内，而且将该范围内的所有 HTML 元素都计算为有效的孩子，因此上面的代码绘制了第 6 个 div 而不是第 7 个，因为它考虑了<br>中间的标签作为一个有效的孩子。如果您要添加新的 HTML 元素，这可能会使事情变得非常混乱并破坏您网站的预期设计。
This is why I recommend using :nth-of-type()instead, if you are trying to target a CSS class or other attributes, just like with :eq()in jQuery.
这就是我推荐使用的原因:nth-of-type()，如果您尝试定位 CSS 类或其他属性，就像:eq()在 jQuery 中一样。
This does the job:
这可以完成以下工作：
.divWrapper > div:nth-of-type(7) {
background: lightblue;
}
You can see this example in this codepen: https://codepen.io/techbawz/pen/ZEYpBPeor you can run the code directly on this answer.
您可以在此代码笔中看到此示例：https://codepen.io/techbawz/pen/ZEYpBPe或者您可以直接在此答案上运行代码。
Hope this helps.
希望这可以帮助。
.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>