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

Question

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

I.e.

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

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

Answer 1

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

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

table.x tr td { ...} 

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

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

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

Answer 2

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

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

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