Вопрос CSS: почему не работает мой селектор таблиц стилей CSS?

Question

У меня есть следующий HTML:

<div id="graphicArea">
    <div id="page1" class="pageArea land"></div>
    <div id="page2" class="pageArea land"></div>
</div>

мой фрагмент файла таблицы стилей CSS (это работает):

.pageArea {
    width:220px!important;
    height:210px!important; 
 }

мой фрагмент файла таблицы стилей CSS (это не работает):

.pageArea.land {
    width:220px!important;
    height:210px!important; 
 }

neitheir это работает:

div.pageArea.land {
    width:220px!important;
    height:210px!important; 
 }

В дальнейшем в этом файле не так много, поэтому я почти уверен, что он не переопределяет CSS. Кто-нибудь знает, почему это не работает?

Спасибо.

EDIT

Все это CSS находится в @media print {..}. Я не думаю, что это актуально, хотя.

EDIT2

Есть ли у FF какие-либо проблемы с настройкой высоты / ширины div в мм? Полагаю, в этом все дело ...

Answer 1

Согласно спецификации CSS 2.1 , ваш код должен работать. Вы используете Internet Explorer 6?

edit 1: .class1.class2 работает с Chrome и, возможно, с другими браузерами. Вы уверены, что ваш селектор не работает? Попробуйте "display: none", чтобы быть уверенным.

Answer 2

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

 <div id="page1" class="pageArea land"></div>


.pageArea {
    width:220px!important;
    height:210px!important; 
 }

.land {
    width:220px!important;
    height:210px!important; 
}

Answer 3

.pageArea.land означает, что целевой элемент имеет 2 класса: pageArea и land.

Как устроен ваш HTML-код?Является ли .land ребенком .pageArea?Если это так, вам просто нужно пространство между ними, то есть

.pageArea .land { .... }

Answer 4

РЕДАКТИРОВАТЬ Все это CSS находится в @media print {..}. Я не думаю, что это актуально, хотя.

Если он находится в @media print { }, css будет применяться при печати

Чтобы применить его в браузере, используйте @media screen { }

А если вы хотите увидеть его как на распечатке, так и на экране, используйте @media screen, print { }

Answer 5

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

Учитывая небольшие фрагменты HTML и CSS, которые вы нам дали, все выглядит хорошо, но вы говорите, что не получаете желаемого результата. Добавьте к этому ваше излишнее использование !important, и я думаю, можно с уверенностью заключить, что ваша таблица стилей содержит много конфликтующих свойств, которые не показаны в вашем примере кода, и одно или несколько из них влияют на .pageArea.land.

Answer 6

Вы должны иметь пробел между .pageArea.land, как это .pageArea .land Вы можете попробовать следующую структуру CSSdiv # page1 .pageArea {css идет сюда}

div # page1 .land {css идет сюда}

div # page2 .pageArea {css идет сюда}

div #page2 .land {css идет сюда}

Answer 7

у вас есть точка земли на странице области, она должна выглядеть как div.pageArea, .land