css - 如何防止将 css 属性传递给内部元素？

Question

我正在创建 3 个表。

<table id="first">
    <tr>
        <td>
        1. CAPTION
        </td>
    </tr>
    <tr>
        <td>
            <table id="second">
                <tr>
                    <td>
                        2. CAPTION
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="" width="100" height="100" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table id="third">
                <tr>
                    <td>
                        3. CAPTION
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="" width="100" height="100" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

我想为主表 td 元素添加 10px 内边距 (padding-top:10px)。

#first tr td
{
    padding-top: 10px;
    padding-left: 0pt;
}

但是这个填充是添加到内部表的 td 元素。

如何防止将 padding-top 设置传递给内部表？

Answer 1

使用#first > tr > td。

它的意思是“td 是 tr 的直接子元素，tr 是 ID 为‘first’的元素的直接子元素”。