Practical style modifications for element tables

As shown in the figure below, generally when we make large-screen visualization pages, there are always a lot of things to change. It is very troublesome to change the style. I open F12 to find it for a long time and then slowly try to solve it.

 Below are some styles I wrote. Record them so that you don’t have to look for them on the console next time.

// 修改分页按钮  禁止点击时的颜色
::v-deep .el-pagination button:disabled{
    background-color: rgba(0,153,250,0.8);
    color: #fff;
}
// 修改分页按钮  点击时的颜色
::v-deep .el-pagination button{
    background-color: rgba(0,153,250);
    color: #fff;
}
// 修改分页按钮  选择当前第几页框样式
::v-deep .el-pager li.active{
    background-color: transparent !important;
    border: 1px solid #0099FA;
}

::v-deep .el-table{
    background-color: unset !important;
}

// 修改分页按钮  总共多少条数据字体样式
::v-deep .el-pagination__total{
    color: #0197F6;
}
// 自定义表格每行样式  配合 row-class-name 做  斑马线
::v-deep .el-table .bk {
    background: rgba(255, 255, 255, 0.1);
}

// 滚动条整体样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    background-color: #343A50;
    width: 12px;
    border-radius: 10%;
    overflow: hidden;
}

// 滚动条滑块样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #214565 !important;
    border-radius: 10%;
}

// 滚动条整体背景样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #343A50;
    border-radius: 10%;
}
// element表格最下方的白线高度
::v-deep .el-table::before {
    height: 0;
}
// 表格中表头样式
::v-deep .el-table th.el-table__cell {
    border-bottom: 1px solid #0D4A91 !important;
    background-color: rgba(204, 231, 245, 0.2) !important;
}

// 表头上上级样式  也是表头
::v-deep .el-table__header {
    background-color: transparent !important;
}
// 表头上级样式  也是表头
::v-deep .el-table__header-wrapper {
    background-color: transparent !important;
}
// 表头每格内样式
::v-deep .el-table__header-wrapper .cell {
    color: #71CDFA;
    font-weight: 600;
}
// 表内数据每格内样式
::v-deep .el-table__body-wrapper .cell {
    color: #fff;
}
// 表格每行样式（去除每行白色下边框）
::v-deep .el-table td.el-table__cell {
    border-bottom: 0;
}
// 表格数据每行 鼠标 hover 样式
::v-deep .el-table tbody tr:hover>td {
    background-color: #9cc1f575 !important;
}
// 整个表格（表头 表内）每行样式
::v-deep .el-table tr {
    background: transparent;
}
::v-deep .el-range-input {
    background-color: transparent !important;
}
// 时间选择器icon样式
::v-deep .el-input__icon {
    color: #01D2E9;
}

::v-deep .el-range-separator {
    color: #01D2E9;
}

::v-deep .el-range-input::placeholder {
    color: #01D2E9;
}
// 树状图背景色
::v-deep .el-tree{
   background: unset !important;
}
// 每行字体颜色
::v-deep .el-tree-node__label{
   color: #fff;
}
// 鼠标覆盖时背景色
::v-deep .el-tree-node__content:hover{
   background: #606266;
}
// 点击节点时的背景色 
::v-deep .el-tree-node:focus>.el-tree-node__content{
  background-color: #606266;
}