elementUI样式修改（Cascader 级联选择器）

elementui的问世，大大提高了前端开发的工作效率，但同时也
带给我们不少烦恼。我们要用UI组件就免不了要对它做一些个性化定制需求，所以我们就必须要覆盖element的一些样式

下面是我开发中遇到的实例：

首先引入Cascader级联选择器，效果如图：

很明显这个样式不是我们需要的，那么就需要处理了…

：附上控制台中的html

接下来，我在单页面组件下面新建style，然后改变它的样式

.el-popper .el-cascader-panel .el-cascader-menu .el-scrollbar_ wrap .el-cascader-menu_ list .el-cascader-node{
          font-size: 14px;
          padding: 0 20px;
          position: relative;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color:  #fffff;
          height: 34px;
          line- height: 34px;
          -webkit-box- sizing: border-box;
          box- sizing: border- box;
          cursor: pointer;
      }

刷新后它的样式还是如此

之后我尝试把元素ul,li的class名删掉，直接换成ul li

<style>
    .el -popper .el-cascader- panel .el-cascader-menu . el-scrollbar_ wrap ul li{
           font -size: 14px;
           padding: 0 20px;
           position: relative;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           color: #fffff;
           height: 34px;
           line-height: 34px;
           -webkit-box-sizing:border- box;
           box-sizing: border- box;
           cursor: pointer;
        }
     .el-popper .el-cascader- panel .el-cascader-menu .el-scrollbar_ wrap ul li .el-icon-arrow-rightf{
           position: absolute;
           top: 50%;
           left: 85%;
           transform: translate(- 5e%, -50%);
      }
      </style>

注：此处不可加scoped,否则样式不覆盖； 为了避免污染全局样式，我个人觉得应该尽可能的找其父元素（愚见望指教）

这样改了之后，奇迹般成功了

虽然成功了，但还是懵懵懂懂的，期待大佬指教…