마지막 자식이 잘못된 div를 선택했습니다.

Question

내 상황에서는 :last-child이 작동하는 데 문제가 있습니다.

HTML :

<div class="test">Some content</div> 
<div class="test">Some content</div> 
<div class="test">Some content</div> 
<div class="action">Some other content</div> 

CSS :

div.topic { 
    border-bottom: 1px solid black; 
} 

div.topic:last-child { 
    border-bottom: none; 
} 

JSFiddle

마지막 div.test 여전히 하단의 테두리가 있습니다. 내가 생각하는 문제는 div.action 인 마지막 div에 적용되고 클래스 테스트의 마지막 div가 아니라는 것입니다.

어떻게 해결할 수 있습니까?

Answer 1

원하는 결과를 얻으려면 마크 업을 업데이트해야합니다. 예를 들어, 래퍼에 알 수없는 항목을 랩 :

Working DEMO

<div id="list"> 
<div class="topic">Some content</div> 
<div class="topic">Some content</div> 
<div class="topic">Some content</div> 
</div> 
<div class="action">Some other content</div>​ 

다음이 CSS를 사용

#list .topic { 
border-bottom: 1px solid black; 
} 

#list .topic:last-child { 
border-bottom: none; 
} 

Answer 2

내가 first-child하지 last-child 사용하는 것이 좋습니다 것입니다.

div.topic { 
    border-top: 1px solid black; 
} 

div.topic:first-child { 
    border-bottom: none; 
} 

이것은 현재 HTML에서 작동하며 브라우저 간 호환이 가능합니다.