样式加scoped后，会为元素增加data-v-xxx属性，因此样式优先级造成的线上样式与本地的不一致。[data-v-xx]属性的优先级

大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

---

背景：Vue项目，今天线上出现了一个元素的样式与本地不一致的情况：顶部背景想要设置成灰色的，实际情况却是蓝色的。也就是想要.version.version1下的样式生效。实际却是.version[data-v-xx]下的样式生效。

 我在本地试了一下，尝试将定义这两个样式的位置换了一下，就能得到想要的灰色背景效果。

由此可以发现，是因为样式的先后顺序不同，导致页面样式表现不一致。

这说明.version.version1和.version[data-v-xx]优先级别是相等的，谁后出现谁生效。通过查询MDN文档发现，类选择器和属性选择器的优先级是一样的。这个时候才意识到[data-v-xx]是属性选择器呀，而打包之后的样式代码加载的顺序和本地有所区别，因此造成了线上和本地样式不一致的情况。

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。