最初の直接の子専用のCSSセレクターはありますか？

私は次の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>。

スタイルのセレクターは、「セクション」というクラスを持つdivの最初の直接の子にのみ適用されると思いました。セレクタを変更して必要なものを取得するにはどうすればよいですか？

あなたが文字通り投稿したことは、「セクションdiv内にあり、その親の最初の子であるdivを見つける」ことを意味します。サブには、その説明に一致するタグが1つ含まれています。

メインdivの両方の子が必要かどうかは、私にはわかりません。もしそうなら、これを使用してください：

div.section > div

ヘッダーのみが必要な場合は、次のようにします。

div.section > div:first-child

>変更を使用すると、説明が「セクションdivの直接の子孫であるdivを検索する」に変わります。

IE6を除くすべての主要なブラウザがこの方法をサポートしていることに注意してください。IE6のサポートがミッションクリティカルな場合は、代わりにクラスを子divに追加して使用する必要があります。そうでなければ、それは気にする価値はありません。

Googleで検索してこの質問を見つけました。これはcontainer、子のタイプに関係なく、classを持つ要素の最初の子を返します。

.container > *:first-child
{
}

CSSは、ルールが継承されるため、カスケードスタイルシートと呼ばれます。次のセレクタを使用して、します親だけの直接の子を選択しますが、そのルールはされ継承されたことによってdivの子供divs：

div.section > div { color: red }

さて、その両方div とその子になりますred。継承したくない場合は、親に設定したものをキャンセルする必要があります。

div.section > div { color: red }
div.section > div div { color: black }

これで、そのdiv直接の子であるシングルだけdiv.sectionが赤になりますが、その子divsはまだ黒になります。

div.section > div

を使用しdiv.section > divます。

さらによいのは、CSSの<h1>見出しとタグにタグを使用して、div.section h1古いブラウザ（を認識しない>）をサポートし、マークアップのセマンティックを維持することです。

あなたの場合の直接の最初の子のCSSセレクターは次のとおりです：

.section > :first-child

直接セレクターは>であり、最初の子セレクターは：first-child

他の人が示唆するように、：の前にアスタリスクは必要ありません。タグを先頭に追加してこのソリューションを変更することで、DOM検索を高速化できます。

div.section > :first-child