#css#如何使用hover，实现父对子的样式改变？

思路及做法：
鼠标移动到父盒子的时候，
里面所有的子盒子的样式都发生变化的，
只需要直接在hover后面加上空格，
并且加上子盒子的类名 ,里面再写其他样式

.父盒子的类名:hover .子盒子的类名 {
//这里写鼠标移入到父盒子里面，子盒子要发生的样式变化
}

温馨提示，遇到父盒子里面的子盒子过多时，可以采取简写的形式：
以下为简写形式：

<div class="btn">
    点击
    <i class="el-icon-sort"/>
</div>

.btn {
    background: #ccc;
    display: inline-block;
    padding: 8px 15px;
    cursor: pointer;
    &:hover {
        color: blue;
        i {
            color: red;
        }
    }
}