#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;
        }
    }
}