html - CSS 2.1 の最初の子疑似クラス

Question

この定義のどこに擬似クラスを配置すればよいかわかりません:

#recently_played_grid li img {
    margin-left: 10px;
}

リストの最初の子だけで、margin-left を 0px に設定したい。私はすべきですか：

#recently_played_grid li:first-child img

?

うまくいかないようです

Answer 1

それは、何をターゲットにしようとしているかによって異なります。それが最初の場合<li>、セレクターは次のようになります。

#recently_played_grid li:first-child img { ... }

最初の画像をターゲットにしようとしている場合:

#recently_played_grid li img:first-child { ... }

マージンが機能しない理由は、要素がインラインに設定されているか、マージンの崩壊が発生している可能性があります。背景色などを追加して、セレクターが機能しているかどうかを確認してください。これは、問題を特定するのに役立ちます。

また、クロスブラウザーが心配な場合は、古いバージョンの IE は構造的な疑似セレクターをサポートしていません。私は通常、ポリフィルとしてSelectivizrのようなものを使用します。