使用：悬停在类和子元素上？

Question

我正在尝试使用:hover效果更改<p>内所有div元素的规则，但我无法在不创建新类的情况下完成此操作。

我不能这样做：

<class>:hover <class> p {
    //something
}

这是一个更好的小提琴：http://jsfiddle.net/34q33/

我知道我可以向<p> element添加一个类，如下所示：http://jsfiddle.net/34q33/1/

但我很好奇为什么我必须给element一个独特的class来完成这个任务;或者如果我以错误的方式解决它。

谢谢，我为可怕的头衔道歉。

Answer 1

您不必为每个元素创建一个类：

.item > p {
margin:0;
background: green;
opacity: 0;
}

.item:hover > p {
opacity: 1;
}

http://jsfiddle.net/34q33/2/

Answer 2

如果您有多个<p>或.item的其他子项来更改样式，您可以使用

.item:hover :nth-child(2)

也是第一个可以使用.item:hover :nth-child(1)或直接使用第一胎选择器的第一个孩子.item:hover :first-child

DEMO here