项目中遇到的element-ui修改样式/deep/

//改变element-ui的分页 样式
/deep/.msg-pagination-container.is-background .el-pager li {
  /*对页数的样式进行修改*/
  background-color: #011b2c;
  border: 1px solid #45ccf4;
  color: #fff;
}
/deep/.msg-pagination-container.is-background .btn-next {
  /*对下一页的按钮样式进行修改*/
  background-color: #011b2c;
  border: 1px solid #45ccf4;
  color: #fff;
}
/deep/.msg-pagination-container.is-background .btn-prev {
  /*对上一页的按钮样式进行修改*/
  background-color: #011b2c;
  border: 1px solid #45ccf4;
  color: #fff;
}
/deep/.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #011b2c;
  color: #45ccf4;
}
/deep/.el-icon {
  color: #45ccf4;
}
//end

// 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
/deep/ input::-webkit-input-placeholder {
  color: #fff;
}
/deep/ input::-moz-input-placeholder {
  color: #fff;
}
/deep/ input::-ms-input-placeholder {
  color: #fff;
}

//按钮样式
/deep/ .el-button--primary {
  background-color: #08164d;
  height: 35px;
  border-color: #08164d;
  display: flex;
  align-items: center;
}
/deep/.el-date-editor .el-range-input {
  background-color: #08164d;
  color: #ffffff !important;
}

//改变日期选择器的宽度
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 280px;
}
//下拉框宽度
/deep/ .el-input,
.el-input__inner {
  width: 150px;
}

/deep/.el-range-separator {
  color: #ffffff;
}
//修改的是el-input的样式
//一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
//另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
/deep/ .el-select,
/deep/ .el-input,
/deep/ .el-input__inner {
  height: 35px;
  background-color: #08164d;
  color: #fff;
  border: 0px;
  border-radius: 0px;
  text-align: center;
}
//el-input聚焦的时候 外层的border会有一个样式
/deep/ .el-select .el-input.is-focus .el-input__inner {
  border: 0px;
}
//修改的是el-input上下的小图标的颜色
/deep/ .el-select .el-input .el-select__caret {
  color: #fff;
}
//修改总体选项的样式 最外层
/deep/ .el-select-dropdown {
  background-color: #08164d;
  margin: 0px;
  border: 0px;
  border-radius: 0px;
}
//修改单个的选项的样式
/deep/ .el-select-dropdown__item {
  background-color: transparent;
  color: #fff;
}
//item选项的hover样式
/deep/ .el-select-dropdown__item.hover,
/deep/ .el-select-dropdown__item:hover {
  color: #409eff;
}
//修改的是下拉框选项内容上方的尖角
/deep/ .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: none;
}

//更改element-ui中table边框样式
/deep/.el-table--border,
.el-table--group {
  border-top: 2px dotted #2f84b5;
  border-left: 2px dotted #2f84b5;
  border-radius: 8px;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border-bottom: 2px dotted #2f84b5;
}
/deep/.el-table--border th,
.el-table--border th.gutter:last-of-type {
  border-bottom: 2px dotted #2f84b5;
}
/deep/.el-table--border td,
/deep/.el-table--border th {
  border-right: 2px dotted #2f84b5;
}
//end

//更改table背景色
/deep/.el-table th {
  background-color: #052c45;
  color: #06d8de;
}
/deep/.el-table tr {
  background-color: #052c45;
  color: #ffffff;
}
//end

//鼠标悬停高亮 改为透明
/deep/.el-table tbody tr:hover > td {
  background-color: transparent !important;
}
//end