::v-deep和&:hover的含义

 一.&:hover的含义

.el-icon-s-fold {
    font-size: 18px;
    cursor: pointer;
    color: #c1c6c8;
    margin-left: 10px;

    &:hover {
        color: #ffffff;
    }
} 
&指的是上级样式名

 以上代码等同于

.el-icon-s-fold {
    font-size: 18px;
    cursor: pointer;
    color: #c1c6c8;
    margin-left: 10px;
   .el-icon-s-fold:hover {
    color: #ffffff;
  }
}

二. ::v-deep的含义

 vue项目中经常在style 标签内添加 scoped 来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式，但同样引发不能在当前组件修改子组件的样式，因此就出现了深度选择器 ::v-deep

::v-deep .el-dropdown {
      color: #fff;
 }