css - :nth-child - 在父悬停时激活

Question

我希望悬停父元素并让它更改所有子元素的 CSS。我以为这很简单。很容易说：

.element:hover .children{
}

在悬停该元素时，您可以确定要影响哪些元素。我希望这里的所有孩子都受到影响，但我不知道我做错了什么。这是一个简单的例子：

这是我正在使用的特定 nth-child CSS：

.rowYellow:hover .rowYellow:nth-child(n){
    color:yellow;
}

我也尝试过使用我所知道的有效方法（第一个示例，我指定了一个要在悬停时更改的元素）并使用多个元素http://jsfiddle.net/ZqTcT/12/：

.rowYellow:hover .rowIcon .rowLabel{
    color:yellow;
}

我知道我养成了将这样的陈述分成两个（或更多）的习惯，因为它也不起作用。

那么，我哪里错了？两种方法都可以吗？如果是这样……怎么办？

任何和所有的帮助表示赞赏。

score 2 · Accepted Answer

.rowYellow:hover .rowYellow:nth-child(n){

以上只会影响与 class 同rowYellow在的元素rowYellow。

相反，要影响所有孩子，只需使用*选择器执行此操作：

.rowYellow:hover *{
    color:yellow;
}

您的第二个选择器说“类的悬停元素内rowLabel的类元素内的所有类元素”，这不是您想要的。相反，您需要一个逗号分隔的选择器：rowIconrowYellow

.rowYellow:hover .rowIcon, .rowYellow:hover .rowLabel{
    color:yellow;
}

作为旁注，我还推荐30 个 CSS 选择器，你必须记住它，因为它非常有帮助，直到你把每个选择器都钉牢了。

1 回答 1