vue css >>> , /deep/ 深度选择器

2023-11-07

vue引用了第三方组件,有时候我们需要改写第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。

有些Sass 之类的预处理器无法正确解析 >>> 这时可以使用 /deep/ 操作符( >>> 的别名)

<style lang="scss" scoped>
  自定义class(外层) >>> 第三方组件class {
      具体的样式内容
  }
自定义class(外层) /deep/  第三方组件class {
      具体的样式内容
  }
  // 当然也可以直接这样写:
  >>> 第三方组件class {
	具体的样式内容
}
// 比如:
>>> .el-modal__header__title {
    width: 80px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium,PingFang SC;
    font-weight: bold;
    color: rgba(0,0,0,1);
    line-height: 22px;
}
 /deep/ 第三方组件class {
	具体的样式内容
}
// 比如
 /deep/ .el-icon-triangle-bottom {
    color: #b2b9cc;
    margin-left: auto;
    margin-right: 10px;
  }
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue css >>> , /deep/ 深度选择器 的相关文章

  • 前端学习资料汇总

    前端工具 can i see http caniuse com 一个查看css及html5在各个浏览器及手机端的支持情况 前端视野 平时可以多看看的网站了解下最新资讯 前端观察站 腾讯的前端技术 挺有含金量 html5 中国 http ww
  • CSS中clear:both的作用

    clear both意思就是清除浮动 例如我们设置了三个div如下
  • Git安装包(window64版本,附有下载教程)

    安装包 官网下载 Git Downloading Package 官网下载太慢 很多时候会因为网络问题下载失败 安装包提供 https download csdn net download a1598452168YY 87263952 下载
  • HTML中四种选择器

    1 类选择器class class 2 id 选择器 id 3 派生选择器 p strong 4 属性选择器 title title te 代码如下 p strong 派生选择器 strong p li strong Hello 派生选 s
  • web前端开发到底是自学还是去上培训班?

    web前端开发到底是自学还是去上培训班 纠结中 应届毕业生 软件技术专业 去年接触到web前端开发这个行业 但是迷迷糊糊的就知道HTML CSS JS 其他一无所知 就知道做网页加一些网页的动态效果 没有系统的学习 相应的用到就学 没用到的
  • 前端实际开发中的命名规范(个人建议)

    如果说计算机科学只存在两个难题 缓存失效和命名 那我觉得前端的命名占有一席之地 让人难以理解的命名方式 单词拼写错误 中英文混用 以数字1 9或者以a z命名 中文拼音命名 强制缩写 命名方法 每个单词之间用 或者 连接 小驼峰 除第一个单
  • 最详细的Hexo Next主题配置教程

    配置环境 安装Node 必须 作用 用来生成静态页面的 到Node js官网下载相应平台的最新版本 一路安装即可 安装Git 必须 作用 把本地的hexo内容提交到github上去 安装Xcode就自带有Git 我就不多说了 申请GitHu
  • 零基础学习WEB前端开发(六):HTML超链接标签

    一 超链接 二 用法及分类 基本语法 外部链接 内部链接 空连接 下载链接 其他元素链接 锚点链接 一 超链接 HTML使用标签 a 来设置超文本链接 超链接可以是一个字 一个词 或者一组词 也可以是一幅图像 您可以点击这些内容来跳转到新的
  • css渐变

    1 线性渐变 是从一个方向到另一个方向的渐变 属性值 background linear gradient 颜色 默认值 从上到下线性渐变 代码 结果 属性延伸 1 改变渐变方向 从下到上 background linear gradien
  • 将一个项目发布到Tomcat上并进行运行

    1 下载任意版本的Tomcat 我这里是9的版本 应该是当前我认为比较好用的一个版本了 有需要的话可以到公众号自取 微信公众号搜索 是短短吖 后台回复 Tomcat 即可 2 在webapp下部署一个项目Test 名字自选 英文即可 新建项
  • vue css >>> , /deep/ 深度选择器

    vue引用了第三方组件 有时候我们需要改写第三方组件的样式 而又不想去除scoped属性造成组件之间的样式污染 此时只能通过 gt gt gt 穿透scoped 有些Sass 之类的预处理器无法正确解析 gt gt gt 这时可以使用 de
  • vue框架采用的模式:MVVM模式

    Vue 框架采用的模式是MVVM模式 响应式布局 MVVM模式 Model View ViewModel 与MVC模式相比 不再局限于数据单向绑定 而是能够实现数据双向绑定 同步刷新 原理 View层和Model层是通过ViewModel层
  • HTML+CSS+JavaScript入门教程(万字)

    前言 作为一名后端开发人员 开发过程中 必不可少的与前端进行对接 因此尽管是后端开发者 也需要一定的前端知识 因此写下HTML CSS JavaScript入门知识 着重介绍了JavaScript 方便自己复习 也各位小伙伴参考 一 HTM
  • Javascript:谈谈JS的全局变量跟局部变量

    今天公司一个实习小妹子问我两段JS代码的区别 我想 好简单
  • 学习vue之node的安装

    关于node 简单的说 Node js 就是运行在服务端的 JavaScript Node js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 Node js 使用了一个事件驱动 非阻塞式 I O 的模型 使其轻量
  • 简述gitee使用及创建仓库及远程连接

    第一步 找到gitee网址 进入 Gitee 基于 Git 的代码托管和研发协作平台 第二步 点击右上角注册按钮 第三步 登录 第四步 点击右上角加号图标 下拉菜单的新建仓库 第五步 新建仓库 取一个仓库名 点击创建按钮 第六步 跳转至新建
  • Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结

    内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第1章 HTML简介 1 前端技术简介 1 从Web1 0到Web2 0 网页制作已经变成前端开发了 对于前端开发来说 你要学的并不是什么 网页三剑客
  • css基本语法

    1 background background image url image jpg background color ccf background position center background repeat no repeat
  • 架构图以及vue的简介

    架构图 前后端分离总架构图 前端架构设计图 MVVM 架构模式 MVVM 的简介 MVVM 由 Model View ViewModel 三部分构成 Model 层代表数据模型 也可以在Model中定义数据修改和操作的业务逻辑 View 代
  • vue_elementui_formatter的使用方法_elementui提取table表格使用formatter方法

    后台管理系统中用到了非常多的表格 一般为了方便都会讲表格进行提取 形成公共组件 提取表格时会遇到返回的json数据中要对单个字段进行处理 如时间戳转换 状态转换等 封装的表格组件代码

随机推荐

  • matlab-滤波系数生成频响曲线

    转载自 matlab 滤波系数生成频响曲线 设计滤波器 build filter sample rate fs 6250 cutoff frequency fc 1000 build a 6th order highpass Butterw
  • 判断多边形与多边形是否相交的方法,代码来自于OpenLayers。

    在做GIS开发时 常常需要用到空间判断的算法 比如 判断地图中的多边形与多边形是否相交 我在项目中具体的需求就是如此 需要过滤某个区域的瓦片地图 先把瓦片地图反向解析成Envolope 然后和该区域进行比对 再做其他处理 其实在已经有开源的
  • 自己动手实现一个《倒水解密》游戏

    本文所有源代码和VisualStudio2010 NET Fx 2 0 工程打包在本文最后下载 别找我要源码 一概不理会 倒水解密 是一款很不错的手机益智类游戏 游戏界面如下 规则是这样的 有N个容量不同的瓶子 指定 将a升水倒入容量为b的
  • 从学术到实践,“学院派”崔宇的区块链破壁之道

    如何将爱好变成事业 崔宇做到了 作为北方工业大学信息学院的学生 崔宇是一个狂热的技术爱好者 为了时刻紧跟技术的发展 他关注量子密码 元宇宙等前沿领域的研究 当被问及业余爱好的时候 崔宇的回答是 没有 唯一的 爱好 是 写编译器 在开源社区
  • Python——hashlib

    hashlib模块 hashlib是一个提供字符加密功能的模块 包含MD5和SHA的加密算法 具体支持md5 sha1 sha224 sha256 sha384 sha512等算法 该模块在用户登录认证方面应用广泛 对文本加密也很常见 模块
  • jni编写时的教训(函数签名不对应)

    最近由于项目结构上的调整 原先我的模块位于APP层 通过aidl hidl调用到native层的c 的服务的接口 用于更新EMMC上的文件内容 需要改为 C 服务更新EMMC上文件内容的代码封装成jni的so库 由我的模块去调用 由于jni
  • Python---字典添加元素

    1 8 5 cvar 字典 特点 1 符号 2 关键字 dict 3 保存元素是 key value 一对 定义 dict1 空字典 dict2 dict 空字典 dict3 ID 123156489795 name lucky age 1
  • VUE---7.事件&循环

    目录 一 事件 二 按键 1 按键修饰符 内置 2 自定义修饰符 event key 3 系统修饰符 4 组合修饰符 三 循环 一 事件 1 绑定事件 2 event事件对象 3 修饰符 stop 阻止冒泡 prevent 阻止默认事件 c
  • 华为服务器近端连接显示绿屏,故障诊断说明 - 华为服务器 iMana 200 用户指南 26 - 华为...

    MCE Error Diagnose DIMMxxx memory fault is doubted of this error Error Handling Suggestion Please shut down system and c
  • Rancher2.x入门教程

    1 x教程请参考上篇 容器管理Rancher1 x及监控工具入门 1 简介 为了更好的管理Kubernetes Rancher的大部分功能经过重新设计 并且Rancher2 0延续了大多数1 0版本的友好功能 如简洁的UI和应用商店等 2
  • nohup和screen的比较

    在实际工作中 我们ssh等到远程的Linux上 运行一个程序 但是当我们关闭掉我们的连接终端断开ssh后 刚才运行着的程序也会自动被中断结束 当ssh连接断开后 如何让我们的程序继续在后台运行呢 下面介绍我常使用的两个方法 A 使用nohu
  • Qt简易闹钟

    配置文件 QT core gui texttospeech greaterThan QT MAJOR VERSION 4 QT widgets CONFIG c 11 The following define makes your comp
  • Leetcode 632最小区间

    632 最小区间 难度 困难 标签 哈希表 双指针 字符串 Description 你有 k 个 非递减排列 的整数列表 找到一个 最小 区间 使得 k 个列表中的每个列表至少有一个数包含在其中 我们定义如果 b a lt d c 或者在
  • linux top详解

    语法 root incloudos logs top h procps ng version 3 3 10 Usage top hv bcHiOSs d secs n max u U user p pid s o field w cols
  • nginx服务器

    一 介绍 Nginx engine x 是一个高性能的HTTP和反向代理服务器 也是一个IMAP POP3 SMTP服务 Nginx是由伊戈尔 赛索耶夫为俄罗斯访问量第二的Rambler ru站点 俄文 开发的 第一个公开版本0 1 0发布
  • 【算法/剑指Offer】如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值。

    题目描述 如何得到一个数据流中的中位数 如果从数据流中读出奇数个数值 那么中位数就是所有数值排序之后位于中间的数值 如果从数据流中读出偶数个数值 那么中位数就是所有数值排序之后中间两个数的平均值 我们使用Insert 方法读取数据流 使用G
  • Angular4.0_数据绑定和管道

    单向数据绑定 使用插值表达式将一个表达式的值显示在模板上 h1 productTitle h1 事件绑定 使用小括号将组建控制器的一个方法绑定为模板上一个事件的处理器
  • ROS机器人语音模块

    ROS机器人语音模块 文章目录 ROS机器人语音模块 零 乘骐骥以驰骋兮 来吾道夫先路 壹 路漫漫其修远兮 吾将上下而求索 贰 苟余情其信姱以练要兮 长顑颔亦何伤 叁 不吾知其亦已兮 苟余情其信芳 肆 虽体解吾犹未变兮 岂余心之可惩 末 亦
  • 【仿真】Carla介绍与使用 [1] (附代码手把手讲解)

    0 参考与前言 主要介绍无人驾驶的仿真环境CARLA 开源社区维护 以下为相关参考链接 Carla官方文档 建议后续找的时候 先按好版本号 有些功能 api 是新版本里有的 Carla官方github Youtube Python Wind
  • vue css >>> , /deep/ 深度选择器

    vue引用了第三方组件 有时候我们需要改写第三方组件的样式 而又不想去除scoped属性造成组件之间的样式污染 此时只能通过 gt gt gt 穿透scoped 有些Sass 之类的预处理器无法正确解析 gt gt gt 这时可以使用 de