鼠标悬停父元素时nth-child选择子元素失效问题及解决

示例HTML结构 #

<div id="parent">
   <div class="child" id="childA"></div>
   <div class="child" id="childB"></div>
   <div class="child" id="childC"></div>
</div>

错误选择器的问题原因 #

你写的#parent:hover #parent:nth-child(1).child完全匹配不到目标元素，核心问题有两个：

1. 层级逻辑错误：#parent:hover之后的#parent是在查找#parent的后代中id为parent的元素，但你的子元素id都是childA/B/C，根本不存在这样的后代元素。
2. 属性匹配错误：#parent:nth-child(1).child要求元素同时满足三个条件——id为parent、是其父元素的第1个子元素、拥有child类，而你的#childA并不具备parent这个id，完全不符合匹配规则。

另外你提到“单独使用#parent:nth-child(1).child能选中#childA”，这应该是笔误，这个选择器实际会匹配id为parent、自身是父元素第1个子元素、且带child类的元素，和#childA毫无关系，你实际用的应该是#parent .child:nth-child(1)这类正确的选择器。

正确的实现方式 #

要在鼠标悬停#parent时，用nth-child选中对应的子元素，正确的选择器写法有两种：

1. 选中所有后代中第1个带child类的元素（这里就是直接子元素）：

#parent:hover .child:nth-child(1) {
  /* 你的样式代码 */
}

2. 精准选中#parent的直接子元素中第1个带child类的元素（更严谨）：

#parent:hover > .child:nth-child(1) {
  /* 你的样式代码 */
}

这两种写法都能在#parent被hover时，正确选中#childA并应用样式。

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