css如何去掉color值


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

在css中,可以使用unset属性去掉color值,只需要给元素设置“元素{color:unset}”即可。如果CSS关键字unset从其父级继承,则将该属性重新设置为继承的值,如果没有继承父级样式,则将该属性重新设置为初始值。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

有以下场景:

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

unset优先级

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

例如:

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

HTML:

1

2

3

4

<header class="h_bg">

<p class="reset">title title title</p>

<span class='reset'>text text text</span>

</header>

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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值

}

推荐学习:css视频教程

以上就是css如何去掉color值的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

你所不知道的css规则,值得收藏!!

css怎么绘制斜线

css怎么隐藏文本超出部分

css flex 的用途详解

js和css文件位置对页面性能有什么影响?

css布局之盒子模型属性

css实现聚光灯效果的代码分享

css如何设置指定网格的大小和位置

如何利用css实现放大缩小关闭效果

如何合理使用css框架?

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...