CSS表：nth-​​child（1）td：nth-​​child（1）不工作

Question

这是我的网站https://www.lemeilleuravis.com/nikon-s7000-test/

这是应该正常运行的代码，但出于某种原因不会：

table:nth-child(1) td:nth-child(1):before {
    content: "✓";
    color: green;
    font-size: 200%;
    float: left;
}

table:nth-child(2) td:nth-child(1):before {
    content: "";
    font-size: 200%;
    float: left;
}

table:nth-child(1) td:nth-child(1) {
background:green;
}

table:nth-child(2) td:nth-child(1) {
background:red
}

我用桌子进行了一些测试：nth-​​child（1）td：nth-​​child（1）：在w3schools尝试之前，它正在工作，因此我的网站出现了一些错误它不起作用。

这是第一个将文本替换为xxx以节省空间的表

    <table>
<tbody>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx

</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
</tbody>
</table>

编辑：我找到了解决方案，我最终使用的是nth-of-type而不是nth-child而且它有效。

Answer 1

检查你的标记。我的假设是在第一个表之前还有另一个元素。无法在移动设备上检查您的网页。在codepen或jsfiddle上试试吧。只需使用表格标记和CSS来查看问题是否仍然存在。

修改 除了表本身之外，容器中还有更多其他元素。您可以将表包装在自己的容器中，以便让nth-child工作，或者为表分配一个类。

Answer 2

复选标记的颜色与背景颜色相同，因此无法显示。试试这个：

＆＃13;

＆＃13;

td:nth-child(1):before {
    content: "✓";
    color: white;
    font-size: 200%;
    float: left;
}

td:nth-child(2):before {
    content: "";
    font-size: 200%;
    float: left;
}

td:nth-child(1) {
background:green;
}
td:nth-child(2) {
background:red
}

＆＃13;

    <table>
<tbody>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx

</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
<tr>
<td width="302">xxx</td>
<td width="302">xxx</td>
</tr>
</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;