实际开发中经常会遇到一种情况，一个功能需求例如表格，可以直接使用element等组件库的表格组件，省时省力。
但实际需求总不会是和组件完全一样的，UI会有各种天马行空的样式给你，例如这种表格样式
这时候有两条路可选
- 自己用原生手写一个，但对于初级菜鸟来讲极不友好，会浪费大量时间走弯路
- 对组件原生样式进行改写
而改写样式就需要用到/deep/样式穿透了
/deep/
- 为了保证每个组件的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>