html - 用于为表格创建斑马背景的 CSS(SCSS？)选择器

<分区>

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

目标代码看起来像这样:

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

block (从到)重复几次，从而创建一个表。

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

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

我在网上搜索了答案，许多人似乎都在共享与我编写的代码(或类似的东西)相同的代码……但我的没有任何显示。

我是否弄错了选择器在 CSS 中的工作方式？选择器 (tbody tr:nth-child(even)) 没有像我希望的那样以所有偶数为目标？

有没有调试css相关问题的好方法？大多数时候，console.log 不会返回非常有意义的消息。

非常感谢您的帮助!

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

最佳答案

我首先看到的是您的 HTML 代码段似乎不完整:结尾 </table>丢失了。

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

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

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

关于html - 用于为表格创建斑马背景的 CSS(SCSS？)选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33626196/

相关文章：

HTML 表格的列滚动