当前位置: 首页 > article >正文

在vue中深度选择器的使用

一、为什么要使用深度选择器

在vue中,当我们使用了第三方库中的组件时,想要更改一些样式,达到我们想要的效果,由于scoped的影响直接编写同名样式时,是覆盖不了组件内的样式的。 

为了达到我们想要的效果,此时有两个解决方法

1. 去掉style标签中的scoped

在子组件中除了使用scoped属性进行样式隔离外,如果不希望样式隔离,可以再写一个style标签,不加scoped属性,这样就会对其他组件的样式造成影响,使用时需要注意。

2. 使用深度选择器

在Vue中,::v-deep 和 :deep() 都用于修改CSS选择器的作用域。
区别在于:

  • :deep() 是一个伪类选择器,可以用于将CSS规则应用于当前组件及其所有子组件中匹配选择器的元素。例如,.foo :deep(.bar)会选择包含class为"bar"的元素的所有嵌套层次结构。
  • ::v-deep 是一个特殊的深度作用选择器,它只在scoped样式中起作用,并且可以将CSS规则应用于当前组件及其所有子组件中匹配选择器的元素。例如,.foo::v-deep .bar 会选择包含class为"bar"的元素的所有嵌套层次结构,但仅对 .foo组件的样式生效。

因此,::v-deep 更具有局部性,而且只能在scoped样式中使用。而 :deep() 则更加通用,适用于全局样式和嵌套组件中的样式。

二、怎么使用


http://www.kler.cn/a/161643.html

相关文章:

  • [JAVAEE] 面试题(四) - 多线程下使用ArrayList涉及到的线程安全问题及解决
  • 时序论文20|ICLR20 可解释时间序列预测N-BEATS
  • Vector Optimization – Stride
  • 排序算法 - 冒泡
  • 【STM32F1】——无线收发模块RF200与串口通信
  • 【stable diffusion部署】超强AI绘画Stable Diffusion,本地部署使用教程,完全免费使用
  • 什么是css初始化
  • 代客泊车手势召车功能设计规范
  • 【计算机网络学习之路】HTTP响应报文Cookie原理
  • 玩转Sass:掌握数据类型!
  • postgreSql逻辑复制常用语句汇总和说明
  • SQL Server权限管理与数据恢复
  • Spring Boot HTTP 400 错误的日志信息在哪里查看 ?
  • 互联网洗鞋上门预约小程序预约下单系统源码公众号源码H5
  • 创建vue项目:node.js下载安装、配置环境变量,下载安装cnpm,配置npm的目录、镜像,安装vue、搭建vue项目开发环境(保姆级教程一)
  • office办公技能|ppt插件使用
  • 要求CHATGPT高质量回答的艺术:提示工程技术的完整指南—第 22 章:情感分析提示
  • QT作业1
  • vscode eide arm-gcc 编译环境搭建调试
  • springboot集成cxf
  • 【开源】基于JAVA的个人健康管理系统
  • 华为配置Smart Link负载分担示例
  • Hadoop3.x完全分布式环境搭建Zookeeper和Hbase
  • QT----Visual Studio打开.ui文件报错无法打开
  • debian11,debian 如何删除虚拟内存,交换分区
  • 【Https】HTTPS协议 的介绍及作用