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{}

---

參考連接
連接描述

連接描述