分享利用谷歌浏览器快速定位想要更改的element-ui元素的原生样式的技巧

举例以el-card中放入el-table为例

要求：将表格背景改为rgb(50, 54, 54)，字体改为白色，悬浮到每一行时背景色为灰色，并且将el-card的背景改为rgb(50, 54, 54)

效果：

样式代码：

* >>> .box-card .el-card__header {
  background-color: rgb(50, 54, 54);
  color: #fff;
}
* >>> .el-card__body {
  flex: 1;
  padding: 0;
  padding-bottom: 5px;
  background-color: rgb(50, 54, 54) !important;
  color: #fff;
}
* >>> .el-table tr {
  background-color: rgb(50, 54, 54);
  color: #fff;
}
* >>> .el-table th {
  background-color: rgb(50, 54, 54);
  color: #fff;
}
* >>> .el-table__body-wrapper tbody tr:hover > td {
  background-color: grey !important;
}

• 第一步，Fn+F12打开开发者工具（本人为windows）
• 第二步利用开发者平台左上角的工具，如下图，选中目标元素

• 选中元素如下：

• 然后向上选中tr这一行，那么此时在样式选项中会出现如下图所示结果：

红圈之中就是我们定位的元素的样式选择器

然后我们就可以利用这个样式选择器添加属于自己的样式，对于element-ui元素的样式穿透选择根据版本不同可以利用

* >>>  选择器

或者

v-deep::选择器