В спецификации CSS 2.1 есть замечательное правило «child selector ». Но оно пока не получило популярности из-за того, что не работает в IE6. Первая и, к сожалению, не без дефектов реализация в этой линейке браузеров была сделана в IE7.
Однако есть трюк, который эмулирует действие этого правила.
<div id="article">
<h1>Header</h1>
<p>First level paragraph</p>
<div>
<p>Paragraph inside div element</p>
</div>
</div>
<p>Copyright info</p>
p {
font-size: 14px;
}
#article > p {
font-size: 18px;
font-weight: bold;
}
Всем параграфам документа назначается высота шрифта 14px. Параграфы, которые являются непосредственными потомками блока с идентификатором article, выделяется жирным шрифтом и высотой шрифта 18px.
Для IE используем следующие правила.
#article p {
font-size: 18px;
font-weight: bold;
}
#article * p {
font-size: 14px;
font-weight: normal;
}
Сначала все потомки блока с идентификатором article получают специальные правила, а затем у внучатых потомков значения измененных стилей возвращаются назад.
Главным недостатком этого способа является то, что требуется знать исходные значения стилей, которые изменялись.