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

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

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

Answer 2

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

<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 div绘制了出来，因为它考虑了<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>

有一个标准的CSS选择器类似于：jQuery中的eq（）吗？

2 个答案: