: 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>

는 사업부의 모든 IMG 태그가 지금 마진 오른쪽있을 것입니다 : 0; . 나는 누군가가 내 질문을 이해하고 나를 도울 수 있기를 바랍니다.

참고 : HTML & CSS 이외의 언어는 사용할 수 없습니다.

Answer 1

다음을 추가해야합니다. 마지막 아이도 img에 추가해야합니다. 사업부에서 마지막 자식에서 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>