CSS селекторы вопрос

Question

Я не уверен, что то, что я ищу, называется селекторами - поэтому будем надеяться, что люди поймут мой вопрос ...

У меня есть (скажем) что-то вроде этого:

<div id="mainwrapper" class="default">
 <div class="boxone"></div>
 <div class="boxtwo"></div>
 ...
</div>

CSS:

.default {width: 100%; background-color: #fff;}
.boxone {width: 50%; background: #f00;}
.boxtwo {width: 50%; background: #0f0;}

Что мне нужно сделать, это добавить что-то подобное в мой CSS (изменение className mainwrapper на «dark» также изменяет все его дочерние элементы):

.dark {background: #000;}
.dark > .boxone {background: #333;}
.dark > .boxone {background: #666;}

Мой второй CSS (вероятно) неправильный, но я полагаю, что это сделано так ... но как? Спасибо.

Answer 1

Ваш CSS будет работать во втором случае. http://jsfiddle.net/8VZZV/

Это происходит потому, что второй селектор имеет специфичность селектора , чем первый.

Прочтите статью об этом здесь .

Знак «больше» > используется для выбора непосредственных детей, но Internet Explorer поддерживает его в версии 8. Поэтому я предлагаю использовать .dark .boxone {background: #333;}

Также исправьте второе правило в вашем CSS: .dark > .boxtwo {background: #666;}

Answer 2

.default {width: 100%; background-color: #fff;}
.default .boxone {width: 50%; background-color: #f00;}
.default .boxtwo {width: 50%; background-color: #0f0;}

.dark {width: 100%; background-color: #000;}
.dark .boxone {width: 50%; background-color: #666;}
.dark .boxtwo {width: 50%; background-color: #666;}

ИЛИ если вы хотите иметь class="default dark"

.default.dark {background-color: #000;}
.default.dark .boxone {background-color: #666;}
.default.dark .boxtwo {background-color: #666;}

Answer 3

.dark .boxone {background: #333;}
.dark .boxtwo {background: #666;}

Должно работать.Демо: http://jsfiddle.net/PURLw/1/

Answer 4

Ваш второй пример будет работать, но использование > означает, что будут выбраны только прямые дочерние элементы .dark.Если вы также хотите выбрать внуков (и других детей), просто избавьтесь от символа >:

Выберите прямого ребенка с классом .boxone:

.dark > .boxone {background: #666;} 

Выберите любойребенок с классом .boxone:

.dark .boxone {background: #666;}