：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，因爲它是非常有幫助的，直到你每次選擇敲定好。