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. 改为全局样式;
相关推荐
Tajang6 分钟前
推荐一个浏览器代理插件(Tajang Proxy),支持Chrome和Edge
前端·chrome·网络安全·渗透测试·靶场·edge
鹏多多10 分钟前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
龙仔CLL41 分钟前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李41 分钟前
12、electron专题(electron-builder)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码1 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation1 小时前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张3 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350239 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛10 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品