How to remove color value in css

In CSS, you can use the unset attribute to remove the color value. You only need to set "element {color:unset}" to the element. If the CSS keyword unset is inherited from its parent, the property is reset to the inherited value, or to the initial value if no parent style is inherited.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

There are the following scenarios:

You use someone else's UI framework, and then you find that the value you dynamically assigned to the css is overwritten by the higher priority css of the UI framework. You can write js to change it, but if there are many layers of loop operations, you need to write a large section of js. At this time, js is not the best choice. What you really need is the 'unset' attribute

Unset priority

If unset is set for a certain keyword, such as color: unset; it will first choose to inherit the parent's attributes, and then choose to inherit its own attribute value, that is: inherit > initial

For example:

The attribute values ​​p and span set the color value. If unset is set, the color value of h_bg will be selected to inherit.

HTML:

<header class="h_bg">
<p class="reset">title title title</p>
<span class=&#39;reset&#39;>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值
}

Recommended learning: css video tutorial

The above is the detailed content of How to remove color value in css. For more information, please follow other related articles on the PHP Chinese website!