Блог

Главная - Вопросы по программированию - Сделать так, чтобы CSS не применялся к дочерним таблицам

Сделать так, чтобы CSS не применялся к дочерним таблицам

#css #cascade

#css #Каскад

Вопрос:

У меня есть следующие 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>

Проблема в том, что класс CSS comTable применяется к таблицам2 и таблицам3, так что для первого столбца таблицы2 и таблицы3 также установлено значение 25%. Как я могу сделать так, чтобы .comTable td:first-child применялся только к TableMain? Пожалуйста, обратите внимание, что у меня слишком много строк в TableMain, поэтому, насколько это возможно, я не хочу применять класс к каждому первому td там.

Ответ №1:

Вы можете сделать

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

для достижения желаемого эффекта.
> означает, что будут затронуты только дочерние элементы первого уровня, а не дочерние элементы глубоко внутри.

Комментарии:

1. Спасибо. После некоторых усилий я, наконец, заставил его работать. Обнаружил, что он обернут tbody, поэтому я должен сделать .comTable > tbody > tr > td:first-child

Ответ №2:

Используйте > вместо : например .comTable > tr > td , или .comTable > * > td .

Ответ №3:

Чтобы добавить к ответу Соломона:

вы можете сложить > (дочерний селектор) с * (селектор для всех элементов). Таким образом, можно получить td данные из tbody и thead.

.comTable > * > * > td

где html выглядит как

 <table id="tableMain" class="comTable"> 
    <tbody>
        <tr>
            <td> ...