前端:css less语法 /deep/ 深度影响的用法

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

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

less 深度选择,css,前端,less

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

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

 less 深度选择,css,前端,less

 文章来源地址https://www.toymoban.com/news/detail-653508.html

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

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

/deep/ 表示深度选择器

用法:

less 深度选择,css,前端,less

 注:

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

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

 

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

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

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

相关文章

  • css中/deep/的用法

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

    2024年02月16日
    浏览(41)
  • 前端三大Css处理器之Less

    Less是Css预处理器之一,分别有Sass、Less、Stylus这三个。         Less https://lesscss.org/         Less 是用JavaScript编写的,事实上,Less是一个JavaScript库,他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。 Less的少数缺点之一是它 不支持函数 。 Less的语法与Scss十

    2024年02月10日
    浏览(49)
  • 前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D

    效果如图,多个物体在轨道上绕中心物体旋转,当旋转到物体后面时将被遮挡。主要使用css实现,为了简化代码,引入less进行处理。 本质上是使用动画控制轨道带动内部的物体进行旋转,计算出每个物体在椭圆轨道上的位置,使用绝对定位放置物体。由于轨道上物体有多个

    2024年02月03日
    浏览(92)
  • 【前端面经】CSS-less/sass/scss的区别和基本使用

    随着Web开发的不断发展,CSS预处理器变得越来越流行。它们为Web开发者提供了一种更高效、更简便的CSS编写方式。Less、Sass以及SCSS作为最受欢迎的三种CSS预处理器,它们都为CSS编写提供了不同的特点和功能。 在本篇博客中,我们将会探讨这三种预处理器之间的区别以及它们的

    2024年02月06日
    浏览(58)
  • webpack5基础使用(1)-介绍、打包文件、处理样式资源(css、less)文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5

    webpack5是一个 静态资源打包工具 。 会以一个或多个文件作为打包的入口,将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以直接在浏览器端运行了 进一步来说就是: 当开发时,肯定会使用框架、es6模块化语法、less/sass等css预处

    2024年02月03日
    浏览(56)
  • CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透

    一、什么是scoped 在vue文件中的style标签上,有一个特殊的属性:scoped。 当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。 二、scoped的原理 为组件实例生成一个唯一标识,给组件中的每个标签对应的d

    2024年04月10日
    浏览(53)
  • 前端实现动态切换主题色-使用 css/less 动态更换主题颜色(换肤功能)或通过单击更改背景颜色

    提示: 以下是本篇文章正文内容,主要描述 使用 css/less 动态更换主题色(换肤功能) 提示: 使用 css/less 动态更换主题色(换肤功能), 方法共通,不限制技术栈: 其实在日常项目开发中经常会遇到有些用户想要一些自定义的的主题色来满足不同的视觉需求,这时候就需

    2024年02月15日
    浏览(67)
  • 设计模式深度解析:AI如何影响装饰器模式与组合模式的选择与应用

    ​🌈 个人主页: danci_ 🔥 系列专栏: 《设计模式》《MYSQL应用》 💪🏻 制定明确可量化的目标,坚持默默的做事。 AI如何影响装饰器模式与组合模式的选择与应用       在今天这个快速发展的技术时代,人工智能(AI)正以前所未有的速度影响着软件开发的各个方面。设

    2024年04月16日
    浏览(31)
  • 【Web】在前端中CSS的语法

    CSS规则是由两个主要的部分构成:选择器、以及一条或多条声明。 选择器通常是需要改变的HTML元素。 每条声明由一个属性和一个值组成。 属性(Property)是需要设置的样式属性(Style attribute)。每一个属性有一个值。且属性与值被冒号分开。 CSS声明总是以分号;结束,声明

    2024年02月05日
    浏览(59)
  • CSS的伪类选择器:nth-child()的用法示例

    CSS的伪类选择器 :nth-child() 的用法示例 n 可以 +- , 右边数字 只能 + 第一到第六的td : td:nth-child(n+1):nth-child(-n+6) 第二到第八的a : a:nth-child(n+2):nth-child(-n+8) 1 等效 0n+1 , 7 等效 0n+7 , 没有负数,不能倒数 第一个a : (1) 或 (0n+1) 第七个a : (7) 或 (0n+7) 想\\\"-1\\\",“0n-1”,“-7”,\\\"0n-7\\\"从倒数开始

    2024年02月22日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包