css的方法使hover标签的子类颜色发生变化？

Question

写了一个简单的例子https://jsfiddle.net/y4okbek1/33/
span,p设置的是reset.css的内容，这个不能变。
怎样实现父类悬停，子类颜色发生变化呢？

<p class="dl1"><span>★</span><span>哈哈</span></p>

.dl1{
    color:blue;
}
span,p{
    color:black;
}
.dl1:hover{
    color:red;
}

Answer 1

继续使用层级选择器，例如

.dl1:hover span {
  color: red
}

Answer 2

只依赖color的继承是不行的。继承样式相对于定义在元素本身上的样式，优先级更低。所以，需要这样：

.dl1:hover span{
    color:red;
}

也就是，同样定义到你想作用的子元素上。 同时，这条规则有更高的优先级，因此可以覆盖掉reset那部分。

Answer 3

.dl1:hover span,.dll:active span{
    color:red;
}