なぜこのCSS：first-childセレクタは動作しませんか？

Question

私はAsp.Net MVC 3プロジェクトに取り組んでおり、レンガの壁にぶち壊して、なぜこれがうまくいかないと思うように動作しているのですか？

私のマークアップは次のとおりです。

<fieldset> 
    <input type="hidden" value="2"> 
    <div class="editor-label"> 
     <label for="Name"> Name</label> 
    </div> 
    ... 
</fieldset> 

私のCSSは次のとおりです。

.display-label, .editor-label 
{ 
    margin: 0.8em 0 0 0; 
    font-weight: bold; 
    display: inline; 
} 

fieldset > div:first-child 
{ 
    margin: 0; 
} 

私はフィールドセットの最初のdivを作成されてやりたいすべては、私は、セレクタと思っ0のマージンを持っていますfieldset > div:first-childは "フィールドセットの最初の子、その型がdiv"にスタイルを適用しますが、明らかに何かが私を逃しています。

私はこれをIE9/FF/Chromeで試しています。そのため、古いブラウザでセレクタを使いこなすことはできません。

ありがとうございました。

Answer 1

fieldset > div:first-childは、「それはdivだfieldset場合の最初の子要素を選択する」を意味します。

「fieldsetの最初のdivを選択する」という意味ではありません。

この場合の最初の子は<input type="hidden" value="2">です。

divをHTMLを変更せずに選択するには、fieldset > div:first-of-typeを使用する必要があります。

残念ながら、:first-childは広くサポートされていますが、:first-of-typeはIE9以上の最新のブラウザでのみ動作します。

この場合、最良の解決策は、fieldset > div:first-childを引き続き使用し、<input type="hidden" value="2">を最初の子ではないように移動することです。