css - 使 CSS 不适用于子表

Question

我有以下 CSS 和 HTML

.comTable {
    width: 95%;
    cellpadding: 2px;
    margin: auto; 
    border-collapse: collapse;
}

.comTable td {
    text-align: left;         
}

.comTable td:first-child {
    text-align: right;            
    width: 25%;
}

<table id="tableMain" class="comTable"> 
    <tr>
        <td>
            Some texts 1                
        </td>
        <td>
            <table id="table2">
                <tr>
                    <td>
                        Some more texts
                    </td>
                    <td>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            Some texts 2                
        </td>
        <td>
            <table id="table3">
                <tr>
                    <td>
                        Some more texts...
                    </td>
                    <td>

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

问题是 comTable CSS 类应用于 table2 和 table3，因此 table2 和 table3 的第一列也设置为 25%。我怎样才能使 .comTable td:first-child 只适用于 tableMain？请注意，我在 tableMain 中有太多行，所以我尽可能不想为每个第一个 td 应用一个类。

Answer 1

你可以做到

.comTable > tr > td:first-child {
    text-align: right;            
    width: 25%;
}

达到预期的效果。> 表示只有第一层次的 child 会受到影响，而不是内心深处的 child 。