元素悬浮(hover)时对其包含的子元素进行样式设置

当父级元素hover的时候，如何对子集元素进行css样式的改变：

方法就是在hover这个伪类后面写下子集元素选择器即可，举例说明：

<div class="parent">
    <ul class="middle">
        <li><a href="#" class="child">80实话网</a></li>
        <li><a href="#" class="child">80实话网</a></li>
    </ul>
</div>

<style>
.parent{
    width:200px;
}
.parent:hover{
    border:1px solid #eee;
}

.parent:hover .child{
    color:red;
}
</style>

当我们鼠标悬浮在parent的div上时，我们不但给它加了一个边框，还给它的子集元素a标签的文字改变了颜色。