私は次のHTMLを持っています
<div class="section">
<div>header</div>
<div>
contents
<div>sub contents 1</div>
<div>sub contents 2</div>
</div>
</div>
そして次のスタイル:
DIV.section DIV:first-child
{
...
}
何らかの理由で、スタイルが「ヘッダー」だけでなく「サブコンテンツ 1」 にも適用されています。<div> <div>
スタイルのセレクターは、「section」というクラスを持つ div の最初の直接の子にのみ適用されると考えていました。セレクターを変更して、必要な結果を得るにはどうすればよいですか?
ベストアンサー1
あなたが投稿したものは文字通り「セクション div 内にあり、親の最初の子である div を検索する」という意味です。サブには、その説明に一致するタグが 1 つ含まれています。
メイン div の両方の子が必要かどうかは不明です。必要な場合は、次のようにします。
div.section > div
ヘッダーだけが必要な場合は、次のようにします。
div.section > div:first-child
を使用すると、>説明が「セクション div の直接の子孫である div を検索する」に変更されます。これが必要な操作です。
IE6 を除くすべての主要ブラウザがこのメソッドをサポートしていることに注意してください。IE6 のサポートがミッション クリティカルな場合は、子 div にクラスを追加して、代わりにそれを使用する必要があります。それ以外の場合は、気にする必要はありません。