位置: IT常识 - 正文

vue中深度选择器(css deep深度选择器)

编辑:rootadmin
vue中深度选择器 scoped的作用

推荐整理分享vue中深度选择器(css deep深度选择器),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue深入浅出,vue深度选择器deep写法,css deep深度选择器,vue深入浅出,css deep深度选择器,vue diff深度优先,vue diff深度优先,vue 深度选择器,内容如对您有帮助,希望把文章链接给更多的朋友!

scoped 可以使当前的样式只在自己当前的组件内起作用。为了防止在一个组件内引入了子组件,而子组件没有加scoped。这个时候如果父子组件有相同的类名,就会产生样式的影响。 原理: 加了scoped就相当于给当前组件所有的标签添加一个【data-v-hash】的属性,而vue中采用的是属性选择器的方式来进行解析,具体解析如下图:

<style scoped></style>

scoped对父子组件的影响

首先,我定义了一个父组件和子组件(child)

vue中深度选择器(css deep深度选择器)

父组件: 子组件(加了scoped): 效果: 我们可以看到,子组件加了scoped后,父组件对h3的css样式就不会影响到子组件,如果子组件没加scoped,就会影响到也变成红色。 那么,我们就是想在子组件有scoped的情况下,影响到子组件的样式怎么办?就引出了深度选择器

深度选择器

首先,我们来认识下三个深度选择器:

原生css: >>> (在没有用less/scss的时候使用) less: /deep/ scss: ::v-deep(如果使用了预处理器都可以使用这个(推荐))

我们上面的实例没有用到scss和less,所以我们使用>>> 效果: 子组件也变成了红色

附加:

/deep/ 如果项目中用到了预处理器 sass less scss 会因为无法编辑而报错 可以使用/deep/ 注意:vue-cli3以上版本不可以

<style lang="scss" scoped>/*用法1*/.a { /deep/ .b { /* ... */ }} /*用法2*/.a /deep/ .b { /* ... */ }</style>

::v-deep 如果使用了预处理器都可以使用

<style lang="scss" scoped>/*用法1*/.a{ ::v-deep .b { /* ... */ }} /*用法2*/.a ::v-deep .b { /* ... */}</style>注意:

我们深度处理器经常用在这样的情况: 例如你使用了ElementUI的走马灯(轮播图)组件,你想修改其中的样式,但是你设置样式不起作用,这个时候就是因为组件的scoped的影响。 解决办法: 1.不妨试试我们的深度处理器吧。(推荐) 2.将 scoped 移除。 3.新建一个没有 scoped 的 style(一个.vue文件允许多个style),如下:

<style scoped>//有scoped的style,此处放当前组件的css代码</style><style>//没有scoped的style,此处放修改ElementUI轮播图的css</style>
本文链接地址:https://www.jiuchutong.com/zhishi/299228.html 转载请保留说明!

上一篇:【Spring+SpringMVC+Mybatis】Spring+SpringMVC+Mybatis实现前端到后台完整项目

下一篇:浅谈当下火热的ChatGPT(浅谈当下火热的行业)

  • 企业申报个税软件怎么下载
  • 企业所得税汇算清缴时间
  • 小规模季报利润表本月金额和本年累计金额
  • 开票项目与实际项目不符
  • 小微企业减免附加税会计分录
  • 开模费用计入什么科目
  • 航空运单能当发票使用吗
  • 可供出售金融资产计入什么科目
  • 股东投入资金大,但不想成为法人
  • 结转本月收入类账户到本年利润会计分录
  • 哪些企业可以享受加计抵减政策
  • 长期应付款预算会计
  • 实发工资比计提多汇算清缴要怎么处理
  • 7月1号出台的政策
  • 年薪制与月薪制的优与劣
  • 无经营零申报公司注销要交印花税吗
  • 个人所得税的征收
  • 商务平台建设
  • 苹果哪些手机有120hz刷新率
  • 电脑管家怎么检测
  • 微软推出windows1
  • 开发票没有银行回单可以入帐吗?
  • 企业所得税汇算清缴扣除标准2023
  • 替换重置的设备更新应考虑
  • 总公司给子公司打款 如何做凭证
  • win11打开图片
  • 培训机构开办资金
  • php怎么上传多个图片
  • 上月暂估成本高了这个月怎么做账
  • linux如何放大字体
  • linux使用范围
  • 坏账准备期末余额怎么计算
  • 发票作废之后税钱怎么退回了
  • 如何补办二手车牌照
  • php 生成opcode
  • linux查看ssh服务开启
  • 新购车辆检测费计入原值吗
  • 基于transformers的nlp入门 pdf
  • 织梦前台的菜单怎么换
  • dedecms使用教程
  • 红字发票已开但红字发票信息表已核销待查证,怎么回事?
  • 税前扣除是什么时候
  • 公账发工资如何开票
  • 报税网页打不开报表怎么办
  • 风险资本生存概率
  • 工会经费的计提基数不包括
  • 合伙企业需要申报哪些税
  • 基本户变更经营范围需要什么材料
  • 增值税专票已经认证了还能退吗
  • 跆拳道馆薪酬详细方案
  • 专利代理服务费如何记账
  • 加计扣除产生的利润可以分配吗
  • 现在增值税是多少个点
  • 抵押贷款的评估费会计分录
  • 维保业务怎么开展
  • 资产负债表中各项目的期末余额
  • 取得房租发票的租赁费可以抵税吗
  • 去年管理费用多支三万元怎么办
  • 周转金怎么计算
  • Linux环境下mysql5.7.13安装教程
  • SQL Select语句完整的执行顺序
  • mysql批量执行sql文件
  • SQLSERVER Pager store procedure分页存储过程
  • win7系统怎么把桌面文件放到d盘
  • explorer.exe进程出错
  • 如何在mac系统和win10之间转换
  • fsma32.exe进程是什么文件 fsma32是什么进程
  • win10极限精简版 200m
  • Cocos2dx------从json文件读取数据
  • cocos按钮点击事件
  • python读配置文件配置信息
  • js正则表达式写法
  • node.js调用第三方物流跟踪api
  • javascript基础题目
  • 叠加计算公式
  • android 获取手机屏幕截图
  • 四川省税务局官方网站申报窗口
  • 河北省国家税务局电子税务局官网
  • 新疆维吾尔自治区民族团结进步工作条例
  • 新加坡国税局的电话号码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设