修改el-select下拉框的样式(包括输入框和弹出层)

因为下拉框的弹出层不在组件内，在body标签内的最后子元素位置；而单组件页面的<script>只对该组件生效，那弹出层是body的直接子元素，跟组件离老远了，能生效才怪了。所以用popper-class = " dxfSelect "

<el-select v-model="featureTypePoint" popper-class="dxfSelect" placement="bottom" size="small" style="width:65% !important;" placeholder="请选择要素点类别">
   <el-option v-for="item in optionsPoint" :key="item.label" :label="item.label" :value="item.value" />
</el-select>

 dxfSelect样式写在项目的统一样式表文件里面，才生效；因为这个统一样式表直接作用于body标签

.dxfSelect {
    background: #184F93 !important;
    border: 1px solid #2C5EA2 !important;
}
.dxfSelect .el-popper__arrow::before {
    background: #184F93 !important;
    border: 1px solid #2C5EA2 !important;
}

 下面是直接写在组件内的<script>也能生效的样式

::v-deep .el-scrollbar__view .el-select-dropdown__list{
  border: none;
  background-color: rgba(1, 28, 82, 0.8);
  margin: 0 0!important;
}
::v-deep.el-popper.is-light .el-popper__arrow::before {
  background:rgba(1, 28, 82, 0.8);
}
/* 拉框选中 */
.el-select-dropdown__item{
  color: #fff;
  background-color: #164D91;
}
/* 鼠标经过下拉框 */
.el-select-dropdown__item.hover, 
.el-select-dropdown__item:hover{
  background-color: #2F68B1;
}
/* 更改select弹出框的边框样式 */
::v-deep .el-select-dropdown {
  border: 1px solid #3b68c3;
  background-color: #184F93  !important;
  margin: 0px 0px !important;
}
::v-deep .el-input__inner::placeholder {
  background-color: #184F93 !important;
  color: #fff;
}
::v-deep .el-input--small .el-input__wrapper {
  background-color: #184F93;
  color: #fff;
}
::v-deep .el-input--small .el-input__inner {
  color: #fff; 
}
::v-deep .el-input__wrapper {
  box-shadow: 0 0 0 1px #2C5EA2 inset;
}

 

前辈致词：

前端就那点东西，不是样式没加上去就是权重不够，加权重最顶的就是 !important ，

在此基础上可以用 .父class名 .子calss名 (先用父class筛一遍，再取其class名是这个的子元素，范围就小一些，权重就更大一些) 增加权重，

还能用父的id选择器配合子元素增加权重