解决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 相关文章推荐
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
原生js实现放大镜效果
Jan 11 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
如何编写jquery插件
Mar 29 jQuery
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
react 创建单例组件的方法
Apr 26 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
vue 页面回退mounted函数不执行的解决方案
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 curl 获取https请求的2种方法
2015/04/27 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
layui-select动态选中值的例子
2019/09/23 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python与Java间Socket通信实例代码
2017/03/06 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
python实现简单多人聊天室
2018/12/11 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
Linux机考试题
2015/07/17 面试题
行政助理求职自荐信
2013/10/26 职场文书
机关财务管理制度
2014/01/17 职场文书
开服装店计划书
2014/08/15 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis