не применяется стиля CSS для дочерних элементов

мы имеемне применяется стиля CSS для дочерних элементов

<div class="xTable"> 
<table> 
    <tr> 
    <td> 
    <div class="xTable"> 
    <table> 
     <tr> 
     <td> 
     <div class="xTable"> 
     <table>...</table> 
     </div> 
     </td> 
     </tr> 
    </table>  
    </div> 
    </td> 
    </tr> 
</table> 
</div>

Как я применяю пользовательские стили CSS для 2 DIV, только второго ДИВ, а не 1 или 3 или глубже?

НЕТ ПУТЕМ ДОБАВИТЬ ДОПОЛНИТЕЛЬНЫЕ КЛАССЫ ИЛИ IDS! Html генерируется динамически и неуправляем.

Я хотел бы использовать

.xTable table .xTable

, но это означает, что 3-й и более глубокие дивы будут затронуты.

ID: Только CSS-селектор.

Спасибо!

источник

2013-03-20 Max Grass

Чтобы полностью удовлетворить как этого по умолчанию разметки и браузеров, которые правильно добавить tbody, где он еще не заданный вам нужно бы использовать:

body > .xTable > table > tr > td > .xTable, 
body > .xTable > table > tbody > tr > td > .xTable { 
    ... 
}

JSFiddle example.

Предполагается, что ваш первый <div class="xTable"> не имеет родителей, кроме <body>.Если это не так, замените body на родителя.

источник

2013-03-20 14:20:17

поэтому в случае сложной иерархии мне нужно указать EACH child? Я попробую. Спасибо –

Селектор '>' выбирает элемент [child] (http://www.w3.org/TR/selectors/#child-combinators) и ничего глубже. 'body> .xTable> .xTable' не будет работать, поскольку' .TTable' не является прямым дочерним элементом '.xTable'; в равной степени, 'body> .xTable> table .xTable' применил бы стиль к всем элементам .xTable, содержащимся в первой' 'таблице' .xTable''s 'table' (таким образом, стиль и 2-го и 3-го элементов'. XTable'). Чтобы не выбирать более глубокие элементы, вам придется работать так. 'x родительский элемент y родителя z ...', а не 'x родительский элемент y parent или grandparent of z ...'. –

thx, идея применена, проблема решена. –

Я бы, скорее всего, дал 2-й div дополнительный класс css.

<div class="xTable second-xTable-div"></div>

источник

2013-03-20 14:10:54 Rob

Согласен. Это наиболее правильное решение с точки зрения семантической разметки. – Adrian

html генерируется динамически, это не тот случай. Мне нужен чистый css. –

@ gr9zev Не можете ли вы сгенерировать класс css? Или это общее, что оно совершенно неуправляемо? – Rob

При использовании someelement someotherelement не важно, насколько глубоко вы идете в первый элемент. Но вы можете добавить > между ними, чтобы выбрать только someotherelement, который является точно ребенком someelement следующим образом: someelement > someotherelement и он не будет выбирать дочерние черты первого селектора.

источник

2013-03-20 14:16:07 Sheric

Класс композиции рекомендуется. например <div class="table level-2" />

источник

2013-03-20 14:17:19 Shuping

Использование селектора :not исключить из родителей, а затем имеющие длинный список дочерних комбинаторов может сделать работу:

:not(table) > .xTable > table > tr > td > .xTable

Вам может понадобиться смешать в неявных TBODY элементов к этому же.

приятнее решение, вероятно, будет:

.xTable .xTable { 
    foo: bar; 
} 

.xTable .xTable .xTable { 
    foo: Whatever it would have been if the previous selector didn't match 
}

источник

2013-03-20 14:18:26 Quentin

Тогда это могло не быть просто:

body > .xTable table tr td.xTable {STYLES}

????

источник

2013-03-20 14:19:08 Michael

Нет '.xTable' - * ребенок * другого. Они потомки на более глубоком уровне, чем это. – Quentin

У всех .xTable уже есть свои стили. Только второму нужно переопределить, не должны влиять элементы более высокого уровня. –

См. Изменение выше. – Michael

Как вы говорите, вы не можете добавлять имя класса, как указано в @Rob, тогда я думаю, что есть только один способ пойти с javascript или jquery. Ниже я предоставил решение, используя jQuery.

$('.xTable:eq(1)').css('backgroundColor','green'); //Selects the second .xTable class div

Проверить больше об этом here

источник

2013-03-20 14:19:44

не применяется стиля CSS для дочерних элементов

ответ

Смежные вопросы