unset

如果CSS关键字 unset 从其父级继承,则将该属性重新设置为继承的值,如果没有继承父级样式,则将该属性重新设置为初始值。换句话说,在第一种情况下(继承属性)它的行为类似于inherit ,在第二种情况下(非继承属性)类似于initial。它可以应用于任何CSS属性,包括CSS简写属性 all

示例

Color

HTML

<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>

CSS

.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}

结果

Border

HTML

<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has has a black border (initial default, not inherited).</p>
</div>

CSS

div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}

结果

规范

规范 版本 评论
CSS Cascading and Inheritance Level 4
unset
Candidate Recommendation 与Level 3无变化
CSS Cascading and Inheritance Level 3
unset
Candidate Recommendation 初始规范

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
unsetChrome Full support 41Edge Full support 13Firefox Full support 27IE No support NoOpera Full support 28Safari Full support 9.1WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 27Opera Android Full support 28Safari iOS Full support 9.3Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support

参见

  • 使用initial将属性设置为其初始值。
  • 使用revert将属性重置为user-agent样式表规定的值(或用户样式,如果存在)。
  • 使用inherit使元素的属性与其父元素相同。
  •  all属性允许您一次将所有属性重置为其初始,继承,恢复或未设置状态。