unset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

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

示例

Color

HTML

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

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

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

结果

Border

HTML

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

css
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}

结果

规范

Specification
CSS Cascading and Inheritance Level 4
# inherit-initial

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
unset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见

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