CSS样式穿透的几种方法
2023-09-11 14:16:44 时间
通常在引入第三方 UI 组件库(如 element-ui或者easyUI等等),需要自定义组件样式时,但由于样式使用了 scoped 属性(为避免组件之间的样式相互影响),导致无法直接覆盖原组件的样式,这时就需要用到样式穿透。
CSS使用样式穿透的方法有以下几种:
1、使用 >>>
符号:
.container >>> .el-input__inner {
width: 160px;
}
该方法适用的样式语法:css、stylus
2、使用 /deep/
:
.container /deep/ .el-input__inner {
width: 160px;
}
该方法适用的样式语法:sass、scss、less
3、使用 ::v-deep
:
::v-deep .el-input__inner {
width: 160px;
}
该方法对所有样式语法通用,即适用于 css、stylus、sass、scss 和 less
其中/deep/
和 ::v-deep
属于深度选择器。
相关文章
- CSS - 工具类 tool.css
- 安装npm install时,长时间停留在fetchMetadata: sill 解决方法——换npm的源
- 解决IIS 不能下载.exe.config文件的方法
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- C# DataTable.NewRow 方法
- Atitit 读取文件并处理目录1.1. 3. 以二进制读取 fread取代fgets 11.2. 4.将整个文件读入到一个字符串的方法 file_get_contents() 11.3.
- Atitit 提升开发效率法 fx t35 Atitit 提升开发效率法---开发方法架构简化法.docx 目录 1. 主要几个层次上简化开发1 1.1. ,开发体系方法使用简单方法1 1.2.
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- css练习:让一个元素垂直水平居中的四种方法
- 文字识别:关键信息提取的3种探索方法
- 【Groovy】Groovy 方法调用 ( Java 类成员及 setter 和 getter 方法设置 | Groovy 类自动生成成员的 getter 和 setter 方法 )
- mysql位_01检查错误代码的方法
- 回炉重造,温故知新__css常规布局方法梳理__开发实战后的经验之谈
- 【CSS】css常用复杂选择器都有哪些?看这一篇就够了_07
- 【CSS】css弹性布局、CSS hack_08
- 【CSS】css转换、css过渡、css动画_09