CSS nth-chid选择器无隐藏的chilld节点[重复]。

Question

这个问题在这里已经有了答案:

我可以将 :nth-child() 或 :nth-of-type() 与任意选择器结合起来吗？ (7个回答)

封闭 19天前.

tr.whois:nth-child(even) {
  background-color: black;
}

.hide {
  display: none;
}

<tr class="whois">row 1</tr>
<tr class="whois">row 2</tr>
<tr class="hide">row 3</tr>
<tr class="whois">row 4</tr>
<tr class="whois">row 5</tr>

这里可见行(1,2,4,5)和列(1,2,4,5)。nth-chid(even) 使黑色(1,3,5)-。

但我需要这个...

Answer 1

你可以做这样的事情。

既然你有 hide 元素，所以在这里你必须使用 ~对于 odd 和 even 这段代码很容易理解，如果你需要解释，请告诉我。

.whois {
  background: green;
  color: white;
}

.whois:nth-child(even) {
  background: black;
  color: white;
}

.whois.hide {
  display: none;
}

.whois.hide~.whois:nth-child(odd) {
  background: black;
  color: white;
}

.whois.hide~.whois:nth-child(even) {
  background: green;
  color: white;
}

<table>
  <tr class="whois">
    <td>row 1</td>
  </tr>
  <tr class="whois">
    <td>row 2</td>
  </tr>
  <tr class="whois hide">
    <td>row 3</td>
  </tr>
  <tr class="whois">
    <td>row 4</td>
  </tr>
  <tr class="whois">
    <td>row 5</td>
  </tr>
</table>