vue项目中<style scoped>导致样式失效

先说解决办法：

1.如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。

1 <style scoped>
2     .a >>> .b { /* ... */ }
3 </style>

2.有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

1 <style lang="scss" scoped>
2     //项目中出现的问题，其他两种写法无效，使用::v-deep成功
3     ::v-deep .ivu-table .demo-table-info-row td{
4           cursor: pointer;
5     }
6     ::v-deep .ivu-table .demo-table-error-row td{
7           cursor: not-allowed;
8     }   
9 <style>

（优先建议使用 ::v-deep 来处理，/deep/有时会因为配置问题无效）

形成这个问题的原因是什么：

　　使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：

 1 <style scoped>
 2 .example {
 3   color: red;
 4 }
 5 </style>
 6 
 7 <template>
 8   <div class="example">hi</div>
 9 </template>
10 
11 
12 //转换后
13 
14 <style>
15 .example[data-v-f3f3eg9] {
16   color: red;
17 }
18 </style>
19 
20 <template>
21   <div class="example" data-v-f3f3eg9>hi</div>
22 </template>

链接：https://vue-loader.vuejs.org/zh/guide/scoped-css.html