前言
在使用el-collapse的时候 有一个默认的padding-bottom = 15px; 与下方的列表间距太大， 想修改改样式
问题
为了避免影响全局样式 在scope中修改
首先查看 控制台发现
修改 el-collapse-item__content的样式即可， 但是为了避免修改其他的collapse
使用了父元素下面的子元素的选取方式：
.el-collapse-item__wrap .el-collapse-item__content{ padding-bottom: 0 px; }
不成功， 查看css源码 被scoped属性 渲染为
添加::v-deep 深度选择后，还是不生效，css渲染为
原因
vue组件中，在 style 设置为 scoped 的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。
查找scoped原理：
1:给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
2;在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
3：如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
发现 el-collapse-item__wrap 样式并没有data属性，所以导致渲染后的css 无法跟指定元素一一对应
解决
1：外层 添加 class样式
css写成
2：在console中 找出有data元素的class样式的父元素
使用
.el-collapse-item ::v-deep .el-collapse-item__content{
padding-bottom: 0 px;
}
后记
1.什么是scoped
vue项目dom里出现的 data-v-xxx 就是scoped的原因
在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。
2.scoped的实现原理
Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:
<style scoped lang="less">
.example{
color:red;
}
</style>
<template>
<div class="example">scoped测试案例</div>
</template>
转译后:
.example[data-v-5558831a] {
color: red;
}
<template>
<div class="example" data-v-5558831a>scoped测试案例</div>
</template>
即:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。
总结：scoped的渲染规则：
给HTML的dom节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个dom 元素； 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式。
3.scoped穿透
scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库的样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
有些情况需要父组件的CSS作用到子组件，这时可以选择去掉scoped，但是会有全局样式污染的风险。
这种情况最好的做法是用deep深度作用选择器。
deep深度作用选择器有两种写法 /deep/ 或 ::v-deep 。
对比一下加和不加的效果
可以看到属性选择器移动到.father后面以后，父组件的css就可以作用到子组件身上
对编译器来说 /deep/就是属性选择器的位置
我们可以控制/deep/的位置来达到控制子组件某个部位的样式，又不会污染整个子组件的样式
如
总结：
Vue2.x版本使用优先级 /deep/ > >>>
Vue3版本使用::v-deep
在vue中，深度选择器>>>,/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep
4.在组件中修改第三方组件库样式的其它方法
上面我们介绍了在使用scoped 属性时，通过scopd穿透的方式修改引入第三方组件库样式的方法，下面我们介绍其它方式来修改引入第三方组件库的样式:
在vue组件中不使用scoped属性 在vue组件中使用两个style标签，一个加上scoped属性，一个不加scoped属性，把需要覆盖的css样式写在不加scoped属性的style标签里 建立一个reset.css(基础全局样式)文件，里面写覆盖的css样式，在入口文件main.js 中引入
补充：
如何修改 el-dropdown的样式？
