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

  • 个人开不动产租赁发票税率
  • 建筑物进项税额可以抵扣吗
  • 营改增之后建筑企业哪些税可以抵扣
  • 抵账房好不好
  • 银行给企业的存款怎么存
  • 产权转移书据印花税是双方交吗
  • 如何查询增值税申报表
  • 个体户如何报年报
  • 税务清算审计需要多久
  • 建筑物占用的土地怎么算
  • 建安企业结转成本如何计算
  • 暂估运费成本的账务处理
  • 企业确定无法支付的
  • 电子发票会计怎么记账
  • 新企业购买金税盘
  • 建安企业核定征收改查账征收后怎么处理账目
  • 发票冲红后是否可以重开
  • 以无形资产进行投资
  • 最新w10系统专业版
  • 苹果手机上显示LTE是什么意思
  • 鸿蒙系统快捷键
  • php中??
  • 高新企业研发费用比例
  • 股份支付的成本费用可否税前扣除?
  • 报废的设备怎么处理
  • 增值税密码锁定怎么办
  • vue3使用教程
  • 一文搞懂兰州简史
  • display version命令
  • 信息技术服务费税收编码
  • 一定要确认收入的时候才能开票吗
  • 会展中心高新技术展览
  • 股东借款属于什么科目
  • 出纳各种费用如何归类
  • java timestamp localdatetime
  • 抵账的多余款是什么科目
  • 瓶盖再来一次表情包
  • 增值税主表和附表
  • sql2005 数据同步方法
  • sql server数据库怎么使用
  • 公司承担员工的个税怎么做账
  • 递延收益的摊销时点
  • 小规模减免的增值税要交所得税吗
  • 无形资产账面价值和账面余额的区别
  • 差旅费科目设置
  • 公司宿舍楼出租让我当甲方违法吗
  • 原材料存货跌价准备
  • 失控发票补交上年所得税
  • 持有至到期投资账务处理
  • 工程施工合同如何核算收入成本?
  • 加油充值卡能报销吗
  • 劳动局仲裁花钱吗
  • 向客户收取贴纸费用怎么说
  • 财务费用在贷方,怎么结转到本年利润?
  • 垃圾处理费计提依据
  • 行政事业单位固定资产入账标准最新规定
  • 交易性金融资产公允价值变动计入
  • 劳务费差额征税的账务处理
  • MySQL使用select语句查询指定表中指定列(字段)的数据
  • 硬盘安装在哪里
  • windowsxp桌面文件在哪个文件夹
  • ubuntu开机黑屏无法进入登录界面
  • mac地图怎么标记多个位置
  • win7 便签
  • xp取消开机启动项
  • win10激活突然失效
  • zlib是什么意思
  • android break
  • linux运行环境搭建
  • python构造方法的参数
  • css table-cell
  • jquery 表格 排序
  • node cgi
  • javascript获取值
  • python提取html内容
  • 机票的抵扣率是多少
  • 上海各区税务大厅
  • 如何查询公司的营业执照
  • 残疾人在国企有补贴吗
  • 土地增值税清算管理规程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设