vue中css样式覆盖问题 vue中css样式作用域 vue.js样式不起作用-优快云博客

本文介绍了在Vue项目中使用全局样式导致的问题及解决方案。作者在前端项目中尝试为el-input输入框设置非法输入验证，去除<style scoped>后，发现全局样式冲突导致其他页面样式异常。文章详细解释了<style scoped>和全局样式之间的区别，并提供了如何在局部样式中覆盖全局样式的正确方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景：

项目前端使用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{}

参考链接
链接描述

链接描述