如何重置某个css属性值(unset)

场景

你用了别人的UI框架,然后你发现,你给css动态赋的值,被UI框架的优先级更高的css覆盖了。你可以写js来改变它,但是如果有很多层循环+操作,你需要写一大段的js,此时js并不是最优的选择,你真正需要的是 'unset'属性

unset优先级

给某个关键字设置了unset,例如 color: unset; 它首选会选择继承父级的属性,然后才去选择继承本身属性值, 即: inherit > initial

例如:

本身属性值p和span设置了color值,如果设置了unset,就会去选择继承h_bg的color值。

复制代码
HTML:
 
<header class="h_bg">
  <p class="reset">title title title</p>
  <span class='reset'>text text text</span>
</header>
复制代码

CSS:
 
p{
   color:red;
}
span{
   color:blue;
}
.h_bg{
  color:#FFF;
  background:#DEDEDE;
  padding:20px; 
  text-align:center;
  width:200px;
  height:200px;
}
.reset{
  color:unset;   //去掉这个属性,文字会优先使用span和P的color值
}
 
 
复制代码
相关推荐
雪落满地香43 分钟前
css:圆角边框渐变色
前端·css
风无雨3 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!3 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
安分小尧7 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员7 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪8 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya8 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81638 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef068 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪8 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试