CSS 样式穿透

一般情况下,是在项目中引入了第三方的 UI 库(例如:ElementUI)时,我们需要通过"样式穿透"来更改样式。

一、语法

样式穿透的语法分为三种:

  1. >>>:作用于 CSS 中;
  2. ::v-deep:作用于 SASS 中;
  3. /deep/:作用于 LESS 中;

注意:所有的样式穿透语法,都只能在局部样式中生效。

css 复制代码
父级选择 >>> 选择器 {
样式名: 样式值;
}
css 复制代码
父级选择 ::v-deep 选择器 {
样式名: 样式值;
}
css 复制代码
父级选择 /deep/ 选择器 {
样式名: 样式值;
}

二、修改 UI 框架的样式

通常我们在使用 UI 框架时,不会完全使用 UI 框架自带的样式,大部分时候都需要手动去更改 UI 框架的自带样式。

更改 UI 框架的自带样式的方式有以下几种:

  1. 官方提供的属性;
  2. 设置当前组件的局部样式;
  3. 提高选择器的权重值;
  4. 样式穿透;
  5. 添加 !important;
  6. 改为全局样式;
相关推荐
FIN66688 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD18 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆18 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel21 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒28 分钟前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
北海-cherish6 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909067 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist8 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师9 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学