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. 改为全局样式;
相关推荐
Amodoro18 分钟前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin26 分钟前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说1 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4531 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2431 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你1 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2432 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴2 小时前
Tile Pattern
前端·webgl
前端工作日常2 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架
Electrolux2 小时前
你敢信,不会点算法没准你赛尔号都玩不明白
前端·后端·算法