解决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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
javascript实现数独解法
Mar 14 Javascript
javascript常用的方法整理
Aug 20 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
JavaScript模块详解
Dec 18 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
大学生就业求职信
2014/06/12 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2014年创卫工作总结
2014/11/24 职场文书
长江七号观后感
2015/06/11 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
如何利用pygame实现打飞机小游戏
2021/05/30 Python
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang