解决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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
JS简单计算器实例
Jan 20 Javascript
基于jquery实现图片放大功能
May 07 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
js实现3D图片展示效果
Mar 09 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
详解如何运行vue项目
Apr 15 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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往windows中添加用户
2006/12/06 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Python调用.NET库的方法步骤
2019/12/27 Python
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
目标责任书范文
2014/04/14 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
检讨书范文大全
2015/05/07 职场文书
写给女朋友的保证书
2015/05/09 职场文书
教学质量月活动总结
2015/05/11 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
一级电子管军用接收机测评
2022/04/05 无线电