这是一个 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;
}
最佳答案
您将 nth-child
应用于错误的元素:每个 button
只有 1 个子元素。你的意思是定位 li
元素:
#test ul li:nth-child(-n + 3) button
{
background-color: red;
}
关于html - 为什么第 nth-child 应用于所有按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12252916/