：last-childはすべてのimgタグに影響を与えます

Question

これは初めての質問です。私のやりたいことは、私の最後の子供をラッパーのdivに入れて右に余裕を持たせることです。

.wrapper img, 
 
video { 
 
    width: 18%; 
 
    margin-right: 2.5%; 
 
} 
 

 
.wrapper img, 
 
video:last-child { 
 
    margin-right: 0; 
 
}

<div class="wrapper"> 
 
    <img src="cat.jpg"> 
 
    <video> 
 
    <source src="cats.mp4"> 
 
    </video> 
 
    <img src="morecats.jpg"> 
 
    <video> 
 
    <source src="meow.mp4"> 
 
    </video> 
 
    <img src="garfield.jpg"> 
 
</div>

ここでの問題、div要素内のすべてのimgタグは今余裕-権利を持っているということである：0; 。私は誰かが私の質問を理解し、私を助けてくれることを願っています。

注：HTML & CSS以外の言語は使用できません。

Answer 1

追加する必要があります：last-childもimgに追加する必要があります。 div要素内の最後の子からmargin-right: 0;を削除するには

.wrapper img:last-child, .wrapper video:last-child{ 
    margin-right:0; 
} 

Answer 2

、あなたはこれを行うことができます。

.wrapper img:not(:last-child), 
    video:last-child { 
     margin-right: 0; 
    } 

.wrapper img, 
 
video { 
 
    width: 18%; 
 
    margin-right: 2.5%; 
 
} 
 

 
.wrapper img:not(:last-child), 
 
video:last-child { 
 
    margin-right: 0; 
 
}

<div class="wrapper"> 
 
    <img src="cat.jpg"> 
 
    <video> 
 
    <source src="cats.mp4"> 
 
    </video> 
 
    <img src="morecats.jpg"> 
 
    <video> 
 
    <source src="meow.mp4"> 
 
    </video> 
 
    <img src="garfield.jpg"> 
 
</div>