使 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 class被应用到table2和table3，这样table2和table3的第一列也被设置为25%。我怎样才能使 .comTable td:first-child 只适用于 tableMain？请注意，我在 tableMain 中有太多行，所以我尽可能不想对那里的每个第一个 td 应用 class。

Answer 1

使用 > 而不是：例如.comTable > tr > td 或 .comTable > * > td.

Answer 2

你可以做到

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

达到预期效果。 > 意味着只有第一层 children 会受到影响，而不是 children 深处。

使 CSS 不适用于子表

Make CSS To Not Apply To Child Tables

css

cascade