一个简单的例子:
HTML
<p style="color:red!important"> this text is red <em> this text is in the initial color (e.g. black) </em> this is red again </p>
CSS
em { color:initial; color:unset; }
initial和之间有什么区别unset?仅支持浏览器
initial
unset
根据您的链接:
unset 是一个CSS值,如果继承了一个属性,则该属性与“继承”相同;如果不继承一个属性,则其属性为“初始”
这是一个例子:
pre { color: #f00; } .initial { color: initial; } .unset { color: unset; } <pre> <span>This text is red because it is inherited.</span> <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span> <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span> </pre>
如果您要覆盖样式表中的某些CSS,但您更希望该值是继承的,而不是设置回浏览器的默认值,那么这种情况就很重要。
例如:
pre { color: #00f; } span { color: #f00; } .unset { color: unset; } .initial { color: initial; } <pre> <em>Text in this 'pre' element is blue.</em> <span>The span elements are red, but we want to override this.</span> <span class="unset">[color: unset]: This span's color is unset (blue, because it is inherited from the pre).</span> <span class="initial">[color: initial]: This span's color is initial (black, the browser default).</span> </pre>