为什么nth-child适用于所有按钮？

Question

这是我的HTML和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错误的元素:每个元素只有一个孩子button.你的意思是要定位li元素:

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

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