：nth-​​child - 在家长悬停上激活

Question

我正在寻找悬停父母元素，并让它更改所有孩子的CSS。我认为这很简单。这很容易说出：

.element:hover .children{ 
} 

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

http://jsfiddle.net/ZqTcT/11/

这是我使用的是特定的第n个孩子CSS：

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

我用我所知道的作品也尝试（第一个例子，其中I特定改变悬停一个元件），并使用多个元件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; 
} 

jsFiddle A

你的第二选择说“rowIcon类的元素中rowLabel类的所有元素中徘徊的元素类rowYellow“，这不是你想要的。相反，你要一个逗号分隔的选择：

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

jsFiddle B

作为一个侧面说明，我还建议30 CSS selectors you must memorize，因为它是非常有帮助的，直到你每次选择敲定好。