位置: 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(浅谈当下火热的行业)

  • 无票收入小规模怎么报增值税
  • 应纳税所得额是利润总额吗
  • 民营医院一般纳税人帐务处理视频税收风险
  • 嵌入式软件产品即征即退
  • 企业所得税税负高是什么意思
  • 什么是纳税义务人,在理解这一观念时应注意哪些问题
  • 同一家单位发票不一样
  • 银行电子承兑汇票怎么转让
  • 美团代金券是抵用券吗
  • 境外机构在境内发行的人民币债券
  • 关于预计负债应付退货款明细科目
  • 某企业原材料采用实际成本核算,2019年6月
  • 出口退税金额和进项税额不一致
  • 企业预缴所得税的比例要求
  • 办公费税前扣除标准2022最新
  • 公司开年会的费用怎么入账
  • 个人独资企业生活费用和经营费用混在一起的
  • 外币结算方式有哪几种
  • 在建工程抵工程款
  • 个体户营业收入超过500万
  • 发票丢了还可以重开吗
  • 应税消费品用于连续生产应税消费品的
  • 土地增值税的土地成本要扣除增值税吗
  • 往来款和应收账款
  • windows10如何关闭病毒和威胁防护设置
  • 员工招待费会计分录
  • 年初未分配利润计算公式
  • 个人以房产投资一人有限公司时,房产要开发票吗
  • 无票收入科目
  • 企业所得税什么时候交
  • 施工预想内容
  • php输出当月日历
  • 职业病治疗费用由谁来承担
  • 招财树的养殖方法
  • bigfile是什么意思
  • 购入未抵扣的固定成本
  • php跨域解决方案
  • ipad哪款最贵
  • 住房房产税如何征收
  • 高德地图海量点图层刷新
  • 期房如何快速卖出
  • ai生成二次元角色全身
  • 劳务费还没发可以先计提吗
  • php traits
  • php生成随机字母数字代码
  • 后端怎么返回数据给前端
  • nyud数据集
  • 应收账款科目怎么看
  • python的顺序
  • 增值税怎样交
  • 企业所得税中哪些属于免税收入
  • 查补收入是否享受免税政策
  • 支付宝是商品吗
  • 研发费用资本化计入什么科目
  • python列表排序sorted
  • 所有者权益变动表反映的是什么
  • 应付职工薪酬中的职工是指
  • 实收资本印花税税率
  • 充电口有烧焦味怎么简单解决
  • 个体工商户属于个人还是企业
  • 开具定额发票应如何做账?
  • 政府补助怎么记账
  • 上月未记账
  • 公司购买银行理财产品怎么做账
  • 小规模纳税人不超过10万免增值税
  • 软件开发收费标准
  • 个人购汇需要申报吗
  • mybatis怎么搭建
  • macOS 10.12.2下PDF崩溃严重怎么回事 macOS 10.12.2下PDF崩溃的原因以及解决办法
  • linux中安装软件可使用哪些方式
  • win7键盘没反应是怎么回事
  • linux关闭sh
  • unity物体移动速度怎么设置
  • 安卓竖屏改横屏
  • jquery命名空间
  • 贵州税务机关
  • 印花税在哪里查询
  • 双方交换住房可以吗
  • 如何挑选烟叶等级
  • 常设机构怎么缴纳所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设