解决vue单页面修改样式无法覆盖问题


Posted in Javascript onAugust 05, 2019

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。

vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。

比如:

<style scoped>
 .example {
 color: red;
 }
</style>

<template>
 <div class="example">hi</div>
</template>

转换结果:

<style>
 .example[data-v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" data-v-f3f3eg9>hi</div>
</template>

如果你想修改class="example"里面的span样式,你会发现是没有效果的

有两个解决办法

方法一

你可以在一个组件中同时使用有作用域和无作用域的样式:

<style scoped>
 .example{
  // ...
 }
</style>

<style>
 .example span {
  // ...
 }
</style>

方法二

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

只作用于css!!!!!!!!!!!!!!

<style scoped>
 .a >>> .b { /* ... */ }
</style>

上述代码将会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

如果是sass/less的话可能无法识别,这时候需要使用 /deep/ 选择器了。

<style lang="less" scoped>
 /deep/ .b {
 color: #000;
 }
}
</style>

总结

以上所述是小编给大家介绍的解决vue单页面修改样式无法覆盖问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 #Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 #Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 #Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 #Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 #Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 #Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
node内置调试方法总结
2018/02/22 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
Python实现二分法算法实例
2015/02/02 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
django解决跨域请求的问题详解
2019/01/20 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
python实现微信打飞机游戏
2020/03/24 Python
python语言的优势是什么
2020/06/17 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
高中地理教学反思
2014/01/29 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
租房协议书
2014/09/12 职场文书
长城英文导游词
2015/01/30 职场文书
老人节主持词
2015/07/04 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
优化Mysql查询的示例
2022/04/26 MySQL