CSS nth-chid选择器，没有隐藏的chilld节点

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)-

​

​

但我需要这个-

​

​

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>

​