CSS（SCSS？）选择器用于为表格创建斑马背景[重复]

Question

我是编码新手，在为表格创建斑马背景时遇到了一些麻烦...无论我如何使用 CSS 选择元素，都不会显示任何内容。

目标代码如下所示：

<table class="striped">
  <tr>
    <td class="main">
      Test Submit
    </td>
    <td>
      <button>Submit</button>
    </td>
  </tr>

块（从到）重复几次，从而创建一个表。

下面是我尝试创建斑马背景的 CSS 代码：

table.striped {
  tbody tr:nth-child(even){ background: red;}
}

我在网上搜索了答案，许多人似乎在共享与我编写的代码相同的代码（或类似的代码）......但我的没有任何显示。

我是否弄错了选择器在 css 中的工作方式？选择器 (tbody tr:nth-child(even)) 没有像我希望的那样针对所有偶数编号？

有没有调试 css 相关问题的好方法？ console.log 大部分时间都不会返回非常有意义的消息。

非常感谢您的帮助！

PS。我找到了一些在 jQuery 中可以解决问题的答案……但我确信 CSS 也可以做到这一点？

Answer 1

您需要向表中添加更多行。因为偶数是第二行。

你的css也是无效的

table.striped tr:nth-child(even) { background: red;}

http://jsbin.com/wigitequxu/edit?html,css,output

Answer 2

我看到的第一件事是您的 HTML sn-p 似乎不完整：缺少结束 </table>。

然后，您需要在表格中添加更多行才能看到偶数的自定义样式。

最后，您正在嵌套 CSS 声明，从而使它们无效。

这是working example based on your code。

-- 编辑：抱歉，在我发布之前没有看到答案已经发布。