왜 nth-of-type 태그가 래핑 된 이미지에 작동하지 않습니까?

Question

nth-of-type 함수를 사용하여 시리즈에서 특정 이미지의 스타일을 지정하려고 시도하지만 이미지를 a 태그로 래핑 할 때 끊어지는 것처럼 보입니다. 이미지 만 사용하면 정상적으로 작동합니다. http://jsfiddle.net/o87oyfrx/1/

.row2 img:nth-child(2) { 
    border: 1px solid green; 
} 

<div class="row2"> 
    <a href="http://abcnews.go.com/"><img src="http://abcnews.go.com/assets/images/navigation/abc-logo.png" /></a> 
    <a href="http://abcnews.go.com/"><img src="http://abcnews.go.com/assets/images/navigation/abc-logo.png" /></a> 
</div> 

Answer 1

왜 이미지에하지 :nth-of-type() 작업이 <a> 태그에 싸여 않습니다 여기

내 바이올린입니까?

(대답에 관계없이 거의 동일하지만) 그것은,하지만 당신은 :nth-child(), 그리고 :nth-of-type()를 사용하고 있기 때문에, 내가 대신 그 해결하겠습니다 것입니다.

당신이 직면하고있는 문제는 .group3 내 <img> 요소를 개별적으로 <a> 요소에 싸여 있기 때문에 당신의 선택은 그래서 img:nth-child(2) 아무것도 일치하지 않을 수 있습니다, 잘못된 요소를 선택하는 것입니다이다; img:nth-child(1) 또는 img:first-child을 시도해 본 경우 <img> 요소는 해당 부모 내에서 :nth-child(1) 및 :first-child이므로 모두 성공적으로 선택되었을 것입니다. 그래서

는 .group3 내에서 나타나는 두 번째 <img> 요소를 선택하기 위해, 우리는 부모를 통해 선택하는 데 필요한 <a> :

.row3 a:nth-child(2) img { 
    border: 1px solid green; 
} 

JS Fiddle demo합니다.

:nth-child()은 정확히입니다 (매우 이름으로) 알려줍니다. 인 경우 <img> 요소 인 을 선택합니다. 상위 요소의 :nth-child()입니다. <img> 요소는 모두 <a> 요소에 개별적으로 래핑되므로 요소 중 <img> 요소 중 어느 것도 일치시킬 수 없습니다. 제 <img> 우리가 (잠재적으로 모든 이미지 또는)을 <a> 인 .row3 요소의 실제 번째 자식 내에 유지되는 유일한 이미지를 선택해야하는 선택 수단

.

참고 :

• :nth-child().