css - 多くのimgタグを持つdivで最初のimgタグを選択するには?

Question

私はこのhtmlを持っています:

<div class="image">
   <img src=... />
   <img src= .../>
</div>

そして、最初のimgにクラスを追加することなく、クラス画像のdivの最初の画像にのみcssを適用します(その場合、そうします.image .img1が、別の方法はありますか?

助けてくれてどうもありがとう

score 36 · Accepted Answer

:first-childセレクターを使用してこれを行うことができます。

使用することもできます:nth-child(1) (1 は = 最初の子、2 は 2 番目の子など)。

最後に、より適切な方法は、:first-of-type

例えば：

div.image img:first-child {}

または：

div.image img:nth-child(1) {}

または (他の要素がある場合は、<h1>画像の前にある an を言います:

div img:first-of-type

次のように、内部に画像が含まれるクラス画像を含む div と、画像が含まれる別の div を持つ可能性がある場合:

HTML:

<div class="image">
   <img src=... />
   <img src= .../>
   <div class="image">
      <img src=... />
      <img src= .../>
   </div>
</div>

次に、これらのセレクターを使用します。

例えば：

div.image > img:first-child {}

または：

div.image > img:nth-child(1) {}

または：

div > img:first-of-type

:nth-child()および:first-of-typeは CSS3 セレクターであり、IE を使用する場合はサポートが限定されていることに注意してください。ブラウザーサポートの詳細については、CSS3 セレクターを使用できますかを参照してください。

IE の標準化に役立つSelectivizrのようなものを検討してください。

score 6 · Accepted Answer

first-childセレクターを使用してそれを行うことができます

.image img:first-child
{
  height:500px;
  width:200px;
  border:15px solid Red;    
}

score 4 · Accepted Answer

「:first-child」セレクターは、必要なもののようです。

score 2 · Accepted Answer

DIV 内の最初の画像が必要な場合 (およびその前に他の要素が存在する可能性がある場合) first-of-type、first-child

div > img:first-of-type {}

次のhtmlを検討してください

<div>
    <p>paragraph, this is :first-child</p>
    <img src="..."><!-- this is img:first-of-type -->
</div>

5 に答える 5