在开发中修改第三方组件样式是很常见，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在 css 预处理器中使用才生效。
    我们可以使用>>> 或 /deep/ 或::v-deep解决这一问题:

    1. <style scoped lang="stylus">
    2.   外层 >>> .el-checkbox {
    3.     display: block;
    4.     font-size: 26px;
    5.     .el-checkbox__label {
    6.       font-size: 16px;
    7.     }
    8.   }
    9. </style>
    10. <style scoped lang="less/scss">
    11.   /deep/.el-checkbox {
    12.     display: block;
    13.     font-size: 26px;
    14.     .el-checkbox__label {
    15.       font-size: 16px;
    16.     }
    17.   }
    20.   .testColor {
    21.   color: yellow;
    22.   span {
    23.     color: red;
    24.   }
    25. }
    27. // .testBox .testColor {
    28. //   color: green;
    29. // }
    31. .testBox .testColor2 {
    32.   color: green;
    33. }
    35. .testBox /deep/ .testColor {
    36.   color: green;
    37. }
    38. .testBox ::v-deep .testColor2 {
    39.   color: pink;
    40. }
    42. ::v-deep .nationalColor { // 通用样式穿透
    43.   color: purple;
    44. }
    45. /deep/ .nationalColor { // 通用样式穿透2 好像不顶用
    46.   color: greenyellow;
    47. }
    48. </style>