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. 改为全局样式;
相关推荐
西陵11 分钟前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
小磊哥er22 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
ᥬ 小月亮32 分钟前
webpack基础
前端·webpack
YongGit1 小时前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc