爲什麼nth-child應用於所有按鈕？

Question

這裏是一個example of my HTML and CSS。在我的生活中，我無法弄清爲什麼第二條規則適用於所有按鈕，而不僅僅是前三條。

HTML

<div id="test"> 
<ul> 
<li><button>1</button></li> 
<li><button>2</button></li> 
<li><button>3</button></li> 
<li><button>4</button></li> 
<li><button>5</button></li> 
<li><button>6</button></li> 
    </ul> 
</div> 

CSS

#test button 
{ 
    background-color: blue; 
} 

#test button:nth-child(-n + 3) 
{ 
    background-color: red; 
} 

#test button:hover { 
    background-color: green; 
} 

Answer 1

你申請nth-child到錯誤的元素：只有1名兒童每button的。你的意思是針對li元素：

#test ul li:nth-child(-n + 3) button 
{ 
    background-color: red; 
} 

http://jsfiddle.net/fCFEn/3/