1.改变el-collapse的样式
这里改变了el-collpase的背景颜色
.el-collapse >>> .el-collapse-item
background-color: #e9eef3 !important
.el-collapse-item >>> .el-collapse-item__header
background-color: #e9eef3 !important
.el-collapse-item >>> .el-collapse-item__wrap
background-color: #e9eef3 !important
原理：
.el-collpase
首先可以看到el-collapse是最外层的包裹
图片.png
.el-collapse-item
然后发现el-collpase-item负责了每一块的背景颜色
图片.png
可是光改变el-collapse的背景颜色并没有效果
.el-collapse-item__wrap
.el-collapse-item__header
图片.png
图片.png
头部部分拉开覆盖了头部部分的模块，会发现有个模块含有了类名
图片.png
2.改变分隔线
.el-collpase里有个属性负责整个展开版的上下分隔线
图片.png
wrap里有每个区域的下分隔线
图片.png
但是修改后并没有效果
图片.png
原来是展开后的下分隔线
图片.png
未展开的下分隔线在header那
图片.png
可是修改后header的分隔线不消失
图片.png
发现element-ui使用了is-active（.el-collapse-item__header.is-active）来控制
图片.png
最终效果完成：
图片.png
总结：
可以发现，这里修改的属性全在header和wrap里，那么collapse组件也就是
未展开前：header
展开后：header和wrap控制
展开和未展开的样式变化：is-active
