내가 여기서 뭔가를 놓치고 있니? 첫 번째 아이가 버튼에 사용되지 않을 수 있습니까?

Question

이 마크 업을 사용하여 첫 번째 자식 클래스를 단추에 적용하려고합니다.

button:first-child { 
    background: red; 
} 

그러나 첫 번째 단추 대신 모든 단추가 빨간색으로 바뀝니다. html 마크 업은 다음과 같습니다.

 <ul> 
     <li> 
      <button type="button"><img src="larrow.png" alt="<" /></button> 
     </li> 
     <li> 
      <button type="button">Test</button> 
     </li> 
     <li> 
      <button type="button"><img src="rarrow.png" alt=">" /></button> 
     </li> 
    </ul> 

제안 사항은 무엇입니까? 나는 단지 뭔가 잘못하고 있다고 확신한다.

Answer 1

당신은 당신의 <li> 목록의 다음 버튼을 첫 번째 자식을 선택합니다 :

li:first-child button { 
    background: red; 
} 

Answer 2

버튼에 자식 노드가 없습니다. 다른 지점에있는 별도의 LI의 컨텍스트에 있습니다.

Answer 3

나는 확신하지만, Buttons는 CSS 관점에서 아이를 가질 수 있다고 생각하지 않는다. insted 클래스를 만들어야합니다.

Answer 4

시도 ul li:first-child button {background: red}

데모 :http://jsbin.com/uzoko4

Answer 5

나는 당신이 원하는 것은 같은 생각 :

li:first-child button { 
    background: red; 
} 

나는 확실 할 것이고 그것보다 더 구체적 일 것이다. 어쩌면 :