n 번째 자식 또는 첫 번째/마지막 자식 선택기가 작동하지 않습니다. 올바른 방법으로 적용하는 방법?

Question

나는 구조를 가지고 :

나는 의사 선택기를 사용하여 두 번째 li 요소 (클래스 "li_two")에 background:red을 설정하고 가장 바깥 사업부에서 시작하고자 할

<div id="div"> 
    <ul class="ul"> 
     <li class="li_one"> 
     </li> 
     <li class="li_two"> 
     </li> 
    </ul> 
</div> 

. 나는이 방법을 시도하고있다 :

#div > ul:nth-child(1) { background:red; } // works but wrong, sets background to ul 
#div ul:last-child { background:red; } // doesn't set to any element 
#div ul:first-child { background:red; } // again sets to ul but not to li 
#div [class=li_two] { background:red; } // only this one works fine 

그것은 :nth-child 또는 :last-child 또는 :first-child 선택기를 사용하여 #div에서 li_two에 스타일을 설정할 수 있습니까? 그것을하는 방법?

Answer 1

#div 리 : 마지막으로 아이 귀하의 두번째 옵션은 거의 옳았다

을 : 당신이 마지막으로 아이가 무엇을 오해 생각합니다. xx : last-child 요소 xx의 마지막 자식 요소를 선택하지 않습니다. 부모의 마지막 자식 인 모든 xx 요소를 선택합니다.

Some reading. 당신은`li` 요소를 변경하려면

I've created a JSFiddle for you to test it

Answer 2

:nth-child() 다른 가상 클래스는 부모가 아닌 자식 요소에 적용되어야합니다. li들에게 그 의사 클래스를 적용 :

#div ul li:last-child { 
    background: red; 
}