Как я могу стиль п-й DIV с CSS

У меня есть дизайн, как это:Как я могу стиль п-й DIV с CSS

<body id="layout"> 
<div id="section-header"> 
    <div class="widget" id="Pagelist1"> 
    <div class="widget-wrap1"> 
    <div class="widget-wrap2"> 
     <div class="widget-content"> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="widget" id="Pagelist2"> 
    <div class="widget-wrap1"> 
    <div class="widget-wrap2"> 
     <div class="widget-content"> 
     </div> 
    </div> 
    </div> 
    </div> 
</div> 
</body>

Требование: CSS всегда начинаются с body#layout
Как стиль для widget-content класса (дочерний Pagelist2 ID)?
Я попробовал стиль, как это, но он не работает:
body#layout > #Pagelist2 > .widget-content {....}

Я хочу, чтобы стиль класса .widget-content

источник

2013-10-08 Minh Anh

Oh.sorry. это моя ошибка моего поста. –

Хорошо, ваши ответы уже доступны ниже :) – Harry

Либо

#layout #Pagelist2 .widget-content {....}

или просто

#Pagelist2 .widget-content {....}

Это WASN» т для вас, потому что вы использовали ребенка se lector и #Pagelist2 не является непосредственным ребенком тела.

источник

2013-10-08 12:14:21 Coop

oh.that is right. Я узнал от вас новые знания. Большое спасибо. –

Нет проблем. Рад, что смог помочь. – Coop

Стоит отметить, что это селектор «пространство» называется «селектором потомков», что означает, что он применим ко всем совпадениям, содержащимся в элементе, а не только к прямому ребенку. – Don

body#layout > #Pagelist2 > .widget-content {....}

Это не работает из-за ">": это означает, что # Pagelist2 должен быть непосредственно дочерью тела # макета.

body#layout #Pagelist2 .widget-content {...}

Это будет работать

источник

2013-10-08 12:15:18

Большое вам спасибо. –

Вы используете child selector>.

body#layout > #Pagelist2 > .widget-content

Soo ваш CSS задает стиль всех .widget-content элементов, которые являются непосредственными потомками #Pagelist2, который непосредственными потомками body#layout, но вы не имеете эту цепь на вашей HTML-разметки.

Селектор, который вы хотите

#Pagelist2 .widget-content {...}

Но где мой body#layout?

Вам не нужно, потому что ваша страница может быть только ONE#Pagelist2 быть действительным, как вы можете видеть в id selector спецификации.

источник

2013-10-08 12:20:50

body # layout необходим, потому что это только для макета дома в Blogger. Спасибо за вашу помощь. Я высоко ценю все предложения и ваши. –

Очень рекомендую вам изменить это на класс, а не на идентификатор. Идентификаторы имеют более высокую специфичность, затем используют soo. –

-1

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

Возможно, вы захотите указать полный путь к структуре.

body#layout #Pagelist2 .widget-wrap1 .widget-wrap1 .widget-content

Или упростить его

#Pagelist2 .widget-content

источник

2013-10-08 12:32:37

'>' поддерживается с точностью до ie7. это не причина, чтобы избавиться от него, потому что он ищет селектор потомков, а не дочерний селектор – Don

Как я могу стиль п-й DIV с CSS

ответ

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