背景

在对表格数据进行样式处理时，通过业务逻辑判断，进行对符合要求的表格填充背景色，没有符合预期的效果。反复排查校验代码和判断逻辑，都没有什么问题，可能还是样式上出现问题。再通过F12 选取元素对表格设置背景色时也是不生效。可以定位是样式冲突问题，经过对css代码的查看，可以定位引发这个问题的关键点就在于style标签的scoped属性上。

scoped属性

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的组件，使得该css样式不影响到其他组件或本组件的子组件，也保护的本组件的样式不受其他组件影响。

父子组件样式的作用域

scoped 样式作用域的规则，该组件的所有后代元素都会具备一个相同的作用域属性，而该组件的内部的根元素除了具备当前组件作用域属性也会具备其父级组件的作用域，当然如果父级没有作用域则不具备对于没有样式作用域的组件，如果父组件是有作用域的，那么该组件只有根元素会继承父组价的作用域，其后代的元素不会有作用域对于处在同一层次的组件，其作用域是相同的，从下一代开始才会有所区别特别要注意的是对于组件的复用，在当前项目，不管是什么层级，复用的组件作用域都相同.
参考资料 《详解vue 中 scoped 样式作用域的规则》

原理

代码中引入的局部css，就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位。

使用场景

如果公共组件添加了scoped属性，就会导致它的样式不能修改。

1. 给公共组件写样式时，不添加scoped，这样别的组件在引用它时才可以对它的样式进行调整。
2. 给非公共的组件添加 scoped，这样它自己内部的样式、它对公共组件样式的修改，都仅仅是在本组件有效，而不会影响其他组件对公共组件的使用。

隐患

如果我们在使用时直接在组件的 style 对其进行修改而没有加上 scoped，就会导致这个UI组件的样式被全局修改了，往后的使用自然是会受到影响的。

方案

1. 不使用scope，这样可以对子组件样式进行修改。
2. scoped穿透.
   2.1. 样式穿透的写法有三种：>>>、/deep/、::v-deep
   1. 如果项目使用的是css原生样式，那么可以直接使用 >>> 穿透修改

div >>> .ivu-table-stripe-even td{
   background-color: #faf0dc!important;
 }

2. 项目中用到了预处理器 scss 、sass、less 使用 /deep/
   注意：vue-cli3以上版本不可以

div /deep/ .ivu-table-stripe-even td{
  background-color: #faf0dc!important;
}

3. ::v-deep

div ::v-deep .ivu-table-stripe-even td{
  background-color: #faf0dc!important;
}