html5htmlcssinheritance

CSS: каскадирование всего на один уровень

просмотры: 3.6K

Скажем, у меня есть <table> с определенным классом css (<table class = "x">), и я хочу изменить свойство 'color' только первого уровня <td>, возможно ли это с помощью css без установки классов на соответствующем <td>?

Т.е.

<table class="x">
    <tr>
        <td>
            xxxx
            <table><tr><td>yyy</td><tr></table>
        </td>
    </tr>
<table>

Я только хочу, чтобы xxxx изменил цвет - поэтому в .x td{color:red;} настоящее время будет применяться к xxxx и yyyy, когда я хочу только указать xxxx, но предпочитаю не давать xxxx td имя класса

Источник

Ответов (2)

Решение

Один из вариантов - переопределить каскадный эффект, установив второй уровень на то, что вы хотите, что позволит вам отменить эффекты на верхнем уровне.

Что-то вроде этого:

table.x tr td { ...}

table.x tr td table tr td { ... }

Первый оператор будет применяться ко всем td в таблице .x, но затем второй оператор переопределит это для внутренних уровней вложенности (и всего, что ниже них). Поскольку он идет после первого оператора, он переопределит все, что указано в приведенных выше операторах.

Это также будет работать в IE, потому что он использует более простую конструкцию предков / потомков, а не потомков, которые не так хорошо поддерживаются.

Источник

Попробуй это:

table.x > tr > td { ... }

Это > непосредственный дочерний селектор.

Источник