我不知道是否有一个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;
}
但它没有起作用。
我不知道是否有一个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()
采用的是基于 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)
仅会选择一个。:eq(0)
会选择第一个 div 中的第一个 span 元素。:nth-child(1)
会选择每个 div 中的第一个 span 元素。看起来我在我的回答中表述得不太好。 - Dennis:nth-of-type()
。 - David Lopez<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个
.divWrapper > div:nth-child(7) {
background: lightblue;
}
:nth-child()
实际上计算的不仅是div,还包括该范围内的所有HTML元素作为有效的子元素,因此上面的代码绘制了第6个div而不是第7个,因为它认为中间的<br>
标记是有效的子元素。如果您要添加新的HTML元素,则可能会使事情变得非常混乱并破坏您网站的预期设计。
这就是为什么我建议使用:nth-of-type()
,如果您要针对CSS类或其他属性进行定位,就像在jQuery中使用:eq()
一样。
这样做就可以了:
.divWrapper > div:nth-of-type(7) {
background: lightblue;
}
希望这能帮到您。
.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>
:eq()
等效的标准。请参见jQuery difference between :eq() and :nth-child()。 - BoltClock