css中/deep/的用法

这篇具有很好参考价值的文章主要介绍了css中/deep/的用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式。

<style scoped>
	...
</style>

这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值,从而避免父组件对子组件的样式的影响。

添加后控制台显示的样式就会像这样:

.title[data-v-211e4c4a] {
    color: #ff0;
}

设置了上述scoped的话,如果想要在父组件中修改子组件的样式时应该怎么样做呢?

如果去掉scoped的话就会影响全局样式,但是加上scoped又不能在当前组件修改子组件的样式,这个时候就可以使用 /deep/ 了。

/deep/ 表示深度选择器

用法:

<style scoped>
     /deep/ .title{
        color: #ff0;
    }
</style>

除了 /deep/ 以外,>>>::v-deep也可以实现同样的效果

注意:/deep/ 只能在像 less , sass 等css预处理器中使用,在原生css中使用无效,所以原生css当中应使用 >>> 。

👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
css /deep/,前端,css,前端,html,css预处理器文章来源地址https://www.toymoban.com/news/detail-603590.html

到了这里,关于css中/deep/的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 拥抱简洁:探索Stylus的简洁语法与CSS预处理器之美

    Stylus 是一种 CSS 预处理器,具有以下十大特点: Stylus 使用类似于 Python 的缩进风格的语法,可以省略大括号和分号,使代码更加简洁易读。 当涉及到Stylus的简洁语法时,以下是一个实际的代码案例来展示其特点: 在这个例子中,我们可以看到 Stylus 的简洁语法。它省略了大

    2024年02月12日
    浏览(81)
  • CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!

    CSS预处理器是一种 工具 ,它允许我们编写 类似于CSS的代码 ,但增加了许多编程语言的特性,使编写CSS更加灵活和高效。 CSS预处理器 使用一种 专有语言 ,然后将其编译成普通CSS,可以将这种语言视为CSS的扩展。 例如,CSS编写的一个常见问题是,当需要声明多个类似的样式

    2024年02月11日
    浏览(57)
  • 在vite+vue3项目中配置使用css预处理器(less/sass)以及路径别名

    vite已经将这些预处理器的loader内置了,我们不用再像在webpack项目中那样,需要下载和配置一堆相关的loader,我们只需要下载less,sass依赖,就能直接在项目中使用啦 使用npm或者yarn来安装以下依赖: Less预处理器: npm install -D less Sass预处理器: npm install -D sass 如图,下载之后

    2024年02月11日
    浏览(105)
  • 前端:css less语法 /deep/ 深度影响的用法

    css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式。 这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值,从而避免父组件对子组件的样式的影响。 添加后控制台显示的样式就会像这样:     设置

    2024年02月12日
    浏览(46)
  • 【C语言】程序环境和预处理|预处理详解|定义宏(下)

    主页:114514的代码大冒 qq:2188956112(欢迎小伙伴呀hi✿(。◕ᴗ◕。)✿ ) Gitee:庄嘉豪 (zhuang-jiahaoxxx) - Gitee.com 文章目录 目录 文章目录 前言 2.5带副作用的宏参数 2.6宏和函数的对比 3#undef ​编辑 4 命令行定义 5 条件编译 6 文件包含 总结 咱们书接上回 2.5带副作用的宏参数 先来

    2024年01月17日
    浏览(59)
  • 数据采集与预处理01: 项目1 数据采集与预处理准备

    数据采集:足够的数据量是企业大数据战略建设的基础,因此数据采集成为大数据分析的前站。数据采集是大数据价值挖掘中重要的一环,其后的分析挖掘都建立在数据采集的基础上。大数据技术的意义确实不在于掌握规模庞大的数据信息,而在于对这些数据进行智能处理,

    2024年01月25日
    浏览(65)
  • C语言——程序环境和预处理(再也不用担心会忘记预处理的知识)

    先简单了解一下程序环境,然后详细总结翻译环境里的编译和链接,然后在总结编译预处理。 在 ANSI C 的任何一种实现中,存在两个不同的环境 翻译环境:这个环境中源代码被转换为可执行的机器指令。 执行环境:执行二进制代码。 计算机如何执行二进制指令? 我们写的C语

    2024年02月09日
    浏览(57)
  • 数据预处理matlab matlab数据的获取、预处理、统计、可视化、降维

    1.1 从Excel中获取 使用readtable() 例1: 使用 spreadsheetImportOptions(Name,Value) 初步确定导入信息, 再用 opts.Name=Value 的格式添加。 例2: 先初始化 spreadsheetImportOptions 对象, 再用 opts.Name=Value 的格式逐个添加。 例3: 将导入信息存到变量里, 再使用 spreadsheetImportOptions(Name,Value)

    2024年02月15日
    浏览(56)
  • 图像预处理算法————灰度化处理

    图像预处理算法适合在FPGA上完成,原理简单且需要快速处理,通常有灰度化、中值、均值滤波等,以及颜色空间转换算法。 灰度图像是一种特殊的彩色图像(R=G=B的彩色图像) 只有一种颜色分量,单通道的0-255 方法:一般有分量法、最大值法、平均值法、加权平均法四种方

    2024年01月17日
    浏览(51)
  • 昇腾CANN DVPP硬件加速训练数据预处理,友好解决Host CPU预处理瓶

    本文分享自华为云社区《昇腾CANN 7.0 黑科技:DVPP硬件加速训练数据预处理,友好解决Host CPU预处理瓶颈》,作者: 昇腾CANN 。 随着人工智能的快速发展,越来越多的应用场景需要使用机器学习和深度学习模型。AI网络模型的训练一般分成两个关键部分,一个是训练数据预处理

    2024年02月05日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包