element-ui 卡片头部样式在scoped下失效

这个时候就可以用到深度作用选择器

/deep/.swiper-pagination-bullet-active{
    //使用 scoped 后，父组件的样式将不会渗透到子组件中。
    //使用深度作用选择器 /deep/ 或者'>>>' ,但注意像sass、less预处理器不认三个箭头
    background: #fff;
}

问题对人有帮助，内容完整，我也想知道答案0问题没有实际价值，缺少关键内容，没有改进余地

我想改变卡片头部的样式，发现影响到其他页面的卡片，
于是加了scoped，
可是修改的样式就失效了，请问改怎么配置

 div(slot="header")
    span 产品名称: APEX-XXX  

.el-card__header {
    background-color: #999999;
    padding: 10px 20px;
  }

https://vue-loader.vuejs.org/...
去看深度选择器(百度)

CSS的coped私有作用域和深度选择器

 xinhui9056 关注

 0.2 2018.07.26 17:55 字数 366 阅读 4177评论 1喜欢 4

大家都知道当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。那么他是怎么实现的呢，大家看一下编译前后的代码就明白了：

编译前：

<style scoped>
.example {
  color: red;
}
</style>

编译后：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}

看完你肯定就会明白了，其实是在你写的组件的样式，添加了一个属性而已，这样就实现了所谓的私有作用域。但是也会有弊端，考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影响就会消除。所以，在你的样式里，进来避免直接使用标签，取而代之的你可以给标签起个class名。

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

<style scoped>
    .parent >>> .child { /* ... */ }
</style>

上述代码将会编译成：

.parent[data-v-f3f3eg9] .child { 
    /* ... */ 
}

而对于less或者sass等预编译，是不支持>>>操作符的，可以使用/deep/来替换>>>操作符，例如：.parent /deep/ .child { /* ... */ }

举个栗子

如果想将swiper当前默认蓝色状态改成白色

默认效果

css样式可以可以写

.swiper-pagination-bullet-active{
    background: #fff;
}

看看效果会怎样

重置样式后效果

这个时候就可以用到深度作用选择器

/deep/.swiper-pagination-bullet-active{
    //使用 scoped 后，父组件的样式将不会渗透到子组件中。
    //使用深度作用选择器 /deep/ 或者'>>>' ,但注意像sass、less预处理器不认三个箭头
    background: #fff;
}

使用深度作用选择器后效果