显示默认值

inherit 、initial 、unset 和 revert 是 CSS 的全局关键词，理论上，它们可以应用于除 none 以外的任何 CSS 属性。它们在 CSS 中也被称为 CSS 显式默认值，其中 inherit 、initial 和 unset 是 CSS3 规范中定义的，revert 是在 CSS4 规范中定义的

CSS相关基础知识

CSS 属性的初始值

每一个 CSS 属性都会有一个属于自己的初始值，即由客户端（比如，浏览器）定义的值。这个值通常在 W3C 规范中定义。比如font-size 的初始值是 medium，即：

.font-size {
    font-size: initial;
}

/* 等同于 */
.font-size {
    font-size: medium;
}

浏览器默认（User-Agent）样式表

在所有的 CSS 属性都设置完初始样式之后，紧接着浏览器会加载自身的样式表。该样式表与 CSS 属性的初始值没有任何关系。例如，h1 元素，浏览器给它设置的默认样式如下：

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

两种属性类型：继承和非继承

CSS 中有两组属性：

继承属性组：由默认情况下从父元素继承定义的属性组成；它们主要是排版属性（如 font-size、color 等）。你可以点击这里查询可继承的 CSS 属性组。
非继承属性组：由其余的属性组成，它们不受父元素的定义影响（比如 margin 、padding 等）。

同样的，在 W3C 描述每个属性的时候，都有明确的描述，该属性是哪种类型的属性：

处理 CSS 继承的机制

在 CSS 中提供了几个属性值，可以用来处理 CSS 属性的继承。这几个属性值就是 initial、inherit、unset 和 revert

四者具体阐述：

initial

这个值只是将 CSS 属性重置为其初始值，这个初始值在该属性的 W3C 规范中指定

有时候使用它时，可能会感到困惑，因为属性的初始 CSS 值并不总是如想象的那样，它通常与浏览器的默认样式不同，比如display 属性，为什么初始值就是 inline，所以如果给一个块元素的 display 设置为 initial，会使这个块元素变成一个行内元素

inherit

将 CSS 属性的值设置为 inherit，会将该 CSS 属性的值设置为与其父元素的属性值相等。如果父元素也继承该属性的话，它将一直向上寻找，直到找到某个父元素上设置的具体值。

需要注意，inherit 属性值使元素从其父元素继承其值，而不是从级联中继承其值，比如如下例子，即使设置 p 的 border: inherit，如果其父元素没有显示设置 border，即使父元素的祖先元素有设置 border 也不会继承

unset

unset会执行与 initial 或 inherit 相同的操作

如果一个 CSS 属性本来就是继承的，比如 color、font-family等，那么将会像 inherit 一样执行。
如果一个 CSS 属性本来就是不可继承的，比如 display、border等，那么将会像 initial 一样执行。

revert

revert 关键字首先确定浏览器的 User-agent-stylesheet （浏览器加载的默认 CSS 文件）是否为特定的 HTML 元素创建特殊样式。如果是，则将重置为这些默认样式，如：

div {
    display: revert; /* = block */
}

span {
    display: revert; /* = inline */
}

如果 User-agent-stylesheet （浏览器加载的默认 CSS 文件）中没有为该元素定义样式，则 revert 关键字的行为将类似于 unset 值。

all 关键字

all 属性将所有属性的值重置为给定的值，它目前接受四个值：initial、inherit、revert 和 unset

这个关键字在重置浏览器样式非常有用：

/* 重置除了 `display` 属性之外的所有 User-Agent-Stylesheet 样式 */
* {
    all: unset;
    display: revert;
}

当然，如上重置还会有缺陷。比如当一些特殊的 HTML 元素（<img>等）的 width 和 height 属性被 all: unset 重置时，这些元素上的 width 和 height 属性的效果也被重置

完善细节的代码，可以使用以下《The New CSS Reset》的重置浏览器的代码

@charset "utf-8";
/***
    The new CSS reset - version 1.8.5 (last updated 14.6.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-inline-size: 100%;
    max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
    -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
    all: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
    color: unset;
}

/* remove default dot (•) sign */
::marker {
    content: initial;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
    all: revert;
}