如何在CSS中正确引用第二个和第三个子元素？

你的问题出在选择器的写法上，冗余的嵌套和错误的层级定位导致:nth-child没生效。直接用:nth-child(数字)就能精准选中对应位置的子元素，不用和:first-child、:last-child嵌套使用。

正确写法示例 #

如果要选中keypad的直接第二个子元素和直接第三个子元素，代码应该这么写：

/* 选中keypad的第二个直接子元素 */
keypad > :nth-child(2) {
    background-color: #你要的颜色;
}

/* 选中keypad的第三个直接子元素 */
keypad > :nth-child(3) {
    background-color: #你要的颜色;
}

关键说明 #

• > 符号代表选择直接子元素，避免选中keypad内部更深层的后代元素；如果不需要限制直接子元素，去掉>即可。
• :nth-child(2) 直接对应父元素下的第二个子元素，:nth-child(3) 对应第三个，和:first-child、:last-child是同级的选择器，不需要嵌套使用。
• 你之前写的keypad :first-child :nth-child(1)属于重复选择，:first-child本身就是第一个子元素，再跟:nth-child(1)完全多余，而且空格会让选择器定位到更深层的后代，自然达不到预期效果。

内容的提问来源于stack exchange，提问作者user19898085