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;
}

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

那么，我哪里错了？可以接近工作吗？如果是这样......怎么样？

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

Answer 1

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

上述内容只会影响类rowYellow中包含rowYellow类的元素。

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

.rowYellow:hover *{
    color:yellow;
}

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

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

作为旁注，我还建议30 CSS selectors you must memorize，因为它非常有用，直到你把每个选择器都固定好。