没有隐藏冰镇节点的CSS n-chid选择器

Question

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）和nth-chid(even)使黑色（1,3,5）-

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9iSUNsTS5wbmcifQ==” alt =“在此处输入图像描述”>

但是我需要这个-

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS83b0thOS5wbmcifQ==” alt =“在此处输入图像描述”>

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>