vue中css样式覆盖问题 vue中css样式做用域 vue.js样式不起做用

问题背景：

项目前端使用vue.js和element-ui,因为想要对输入框进行验证，输入值非法时输入框颜色变红，就想要根据el-input编译
后的class进行修改，可是直接在html页面中调用class无效，在网上查资料后，发现把html中的<style scoped>里面
的scoped去掉便可，因为达到效果了就没仔细研究scoped的做用，入坑...
本地测试没有问题后，便直接上线了，but上线后发现其它页面的表格样式所有被覆盖，显示不正常。。。

---

解决思路

F12发现这些出问题的页面均加载出了同class名的其它页面(去掉scoped的html页面)的样式，通过查资料，发现了问题
所在：在vue.js中，<style scoped>的做用域在本html页面，<style>样式的做用域则是全局（即全部html页面），由
于我把其中一个html页面的<style scoped>中的scoped去掉，这个页面的样式就变成了全局样式，当其它页面和这些全
局样式重class名时，样式会被覆盖（vue默认全局样式覆盖局部样式），这样就致使上述状况的发生。

---

后续

如何在<style scoped>局部样式中覆盖全局样式：

• 父组件cssName+ /deep/+第三方库须要更改的cssName

例如 .parentCssName  /deep/  .libCssName{}

---

参考连接
连接描述

连接描述