实际开发中经常会遇到一种情况，一个功能需求例如表格，可以直接使用element等组件库的表格组件，省时省力。
但实际需求总不会是和组件完全一样的，UI会有各种天马行空的样式给你，例如这种表格样式
这时候有两条路可选
自己用原生手写一个，但对于初级菜鸟来讲极不友好，会浪费大量时间走弯路对组件原生样式进行改写
而改写样式就需要用到/deep/样式穿透了
/deep/
VUE官方
为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。只修改这个地方的样式，在其他页面用到本组件的时候不变，就可以用/deep/了把 /deep/ 换成 >>>，也可以达到同样的效果。
<template><el-table ...class="table" ></el-table></template><style scoped>.table /deep/ th{text-align: center;padding: 4px;}.table /deep/ td{border: none;padding: 0;}.table /deep/ .cell{padding: 0;margin:0px 6px;}</style>
但注意，/deep/选择器这个是chrome浏览器自己的标准，其他浏览器并没有实现这个标准，所以其他浏览器是失效的。
补充：!import
CSS写在不同的地方有不同的优先级,加入了!importcss样式优先级最高
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>测试Css中的!Important区别</title> </head> <style type="text/css">.testClass{color:blue !important;}</style><body><div class="testClass" style="color:red;">测试Css中的Important</div></body></html>
