一、 scoped的作用：

使当前组件的样式不会和其它组件冲突

二、注意事件：

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

                <style scoped>

                </style>

三、

在swiper轮播图中，如果要修改分页器的样式，要进行样式穿透（穿透之后，父组件定义的样式可以作用于子组件中的子元素）

（因为有scoped,所以默认情况下，父组件的样式不能作用于子组件的子元素）

下面这句话放在所有选择器的上面

1. scss的样式穿透的写法： 加上/deep/

                        .swiper-container /deep/ .swiper-pagination-bullet {
                            background-color: #f00;
                            opacity: 1;
                        }

stylus的样式穿透的写法

                    .wrapper ::v-deep .swiper-pagination-bullet
                        opacity 1
                        background-color #fff