html - 祖先表类影响后继表元素

Question

有人可以告诉我如何解决影响后继表元素的祖先表类的问题。

我有一张桌子：

<table id="table1" class='parent'>
    <tr>
        <td>
            <table style="width: 100%">
                <tr>
                    <td>

                    </td>
                </tr>
                <tr>
                    <td>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>

        </td>
    </tr>
</table>

我有css设置：

.parent {
    background: yellow;
    width: 200px;
    height: 100px;
}
#table1 tr:first-child td:first-child {
    width: 100%;
    height: 30px;
    border: dashed red 1px;
}

这将导致 table2 tr:first-child td:first-child 也将获得

width: 100%;
height: 30px;
border: dashed red 1px;

如何避免这种情况并仅为父表进行 CSS 设置，而不影响后续表元素

Answer 1

使用“>”不为嵌套表格应用样式

#table1>tr:first-child>td:first-child

或者

#table1>tbody>tr:first-child>td:first-child