Question

我有一个简单的HTML表格，我希望有替代的行颜色。我在样式表中使用nth-child对表行进行了此操作。行中还有子表。问题是，我不希望这些子表中的行是替代颜色。我怎样才能做到这一点？

我希望第一行是灰色的，包括地址子表中的所有行。第二行应该全是蓝色，依此类推。目前的输出是：

的index.html ：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <table class="my-table">
        <tr>
            <td>Address</td>
            <td>
                <table>
                    <tr><td>Addr Line 1</td></tr>
                    <tr><td>City</td></tr>
                    <tr><td>Postcode</td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Specialties</td>
            <td>
                <table>
                    <tr><td>Cool Stuff</td></tr>
                    <tr><td>Interesting Things</td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Personell</td>
            <td>
                <table>
                    <tr><td>John Smith</td></tr>
                    <tr><td>Keanu Reeves</td></tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

stylesheet.css中：

.my-table tr {
    background: grey;
}

.my-table tr:nth-child(even) {
    background-color: CornflowerBlue;
}

更新：我不确定这是一个重复的问题。在关闭它之前，请你至少提供一个更具信息性的答案吗？

防止子表继承备用行颜色

0 个答案: