- 层叠样式
要修改三方ui组件的样式必须先了解css样式的层叠优先级，比较简单来说， !important > 行style > id选择 > 多class选择 > 元素类型选择。
以elemetn为例，一般组件样式的修改都可以直接通过找到其具体的class名进行调整。以element为例在chorm中查看某个表格的样式：（chorme中支持修改样式属性查看效果，调整前可通过这类方法查看）
- 找到属性后就可以使用类选择器修改对应的属性，但会发现在vue带有scoped的 style中设定的样式不生效。这是因为scoped的样式只在本组建范围内生效，具体关于scoped的理解，可以参考这篇：https://www.cnblogs.com/goloving/p/9119460.html。
所有在使用类选择器修改时，如果elemen的子组件是属于本组建的层级之下的，可以使用css穿透，如下所示：
// 对于css
<style scoped>
.father_class >>> .sub_class {
with: 20px
}
</style>
// 对于 scss
<style scoped lang=”scss“>
.father_class /deep/ .sub_class {
with: 20px
}
</style>
- 其它特殊情况
a. 部分特殊情况，如element元素渲染后是 inline style， 则必须在设定属性时加上 ！important，如下所示：
<html>
<body>
<div class="father_class" style="width: 200px"> </div>
</body>
<style>
.father_class {
width: 300px !important; //会覆盖上面200px
}
</style>
</html>
b. 另一种情况是，对于一些特殊组件，其某些页面渲染完成后， 子组件中部分元素和当前组件并不具有层级关系，直接在的子层级，这种情况，去除style中 scoped关键字即可。
2117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
