Stange 行为：table 行中的第 n 个类型（奇数）

Question

嗨，我有 table 行，其中有 2 css classes child 和 parent。 child 被隐藏（显示：none），我想给 parent classes 提供 even/odd 色差。但是尽管我的 class 选择器看起来无法正常工作。

table tr.parent:nth-of-type(odd) td {
  background-color: red;
}

.child {
  display: none;
}

<table>
  <tr>
    <td class="parent">1</td>
    <td>parent</td>
  </tr>
  <tr class="child">
    <td>2</td>
    <td>none</td>
  </tr>
  <tr class="child">
    <td>3</td>
    <td>none</td>
  </tr>
  <tr class="parent">
    <td>4</td>
    <td>parent</td>
  </tr>
  <tr class="parent">
    <td>5</td>
    <td>parent</td>
  </tr>
    <tr class="parent">
    <td>5</td>
    <td>parent</td>
  </tr>
</table>

Answer 1

您已将第一个 parent class 给了 td 而不是 tr。从td中去掉第一个parentclass，放到tr.

检查我的代码。

table tr.parent:nth-of-type(odd) td {
  background-color: red;
}

.child {
  display: none;
}

<table>
  <tr class="parent">
    <td>1</td>
    <td>parent</td>
  </tr>
  <tr class="child">
    <td>2</td>
    <td>none</td>
  </tr>
  <tr class="child">
    <td>3</td>
    <td>none</td>
  </tr>
  <tr class="parent">
    <td>4</td>
    <td>parent</td>
  </tr>
  <tr class="parent">
    <td>5</td>
    <td>parent</td>
  </tr>
  <tr class="parent">
    <td>5</td>
    <td>parent</td>
  </tr>
</table>

Stange 行为：table 行中的第 n 个类型（奇数）

Stange behavior :nth-of-type(odd) in table row

html

html-table

css-selectors

tr