CSS 全局关键字属性值

148 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第17天,点击查看活动详情

参考:《CSS新世界》、CSS 全局范围内的值

所有 CSS 属性都可以接受的全局范围内的值就是全局关键字属性值,包括 initialinherit 和 unset,以及新引入的 revert (en-US)。除 IE 浏览器外的浏览器基本都已支持这些全局关键字属性值。

initial

initial 关键字表示设置初始值的意思,可以把当前 CSS 属性的计算值还原成 CSS 语法中规定的初始值。

  • 适合用在需要重置某些 CSS 样式,但是又不记得初始值的场景
  • 帮助了解 CSS 属性的初始值
  • 需要注意,这里设置的初始值是 CSS 属性的初始值,而不是浏览器样式表指定的值(不是浏览器对某些元素内置的样式)
ol {
 padding: initial; // 0
 list-style-type: initial; // disc
}

inherit

inherit 关键字表示继承的意思,可以指定当前元素的属性值基于父元素进行计算。

继承关系始终来自文档树中的父元素!

unset

unset 关键字是不固定值的,会去判断当前使用的 CSS 属性是否可以从父元素继承,可以就会使用 inherit 的关键字,不可以就会使用 initial 关键字。

比如:

t {
	color: unset; // inherit
	background-color: unset; // initial
}
  • 对于某个具体的 CSS 属性,建议使用 inheritinitial 设置
  • unset 关键字适合配合 all 属性使用才有意义

比如 Chrome 浏览器支持的 <dialog> 元素内置了很多不需要的样式,配合 all 属性可以批量重置,让任意一个元素样式表现和 <span> 元素一样,然后再设置我们需要的属性:

dialog {
	all: unset;
	// ...
}

revert

revert 关键字可以让当前元素的样式恢复成浏览器内置的样式。

配合 all 属性可以批量恢复,让元素恢复成浏览器默认的样式。