关于前端:CSS全局关键字

css的全局关键字有上面几个：

• inherit : 继承父级属性
• initial：将元素初始化成 css 的初始值
• unset：继承和初始化元素
• revert：还原到浏览器内置款式
• all：代指所有 css 属性

上面别离说说这几个关键字的理论作用

inherit 继承父级属性

inherit能够继承父级属性，能够将某个属性设置为inherit，那么该属性就会继承父级元素属性

    <div class="father"> 父级容器
        <div class="children"> 子级容器 </div>
    </div>

.father{color:red;}
.children{
     color: blue;  /* 被父级笼罩 */
     color:inherit;  /* 继承父级属性 */
}

依照执行程序，color:blue会被笼罩，children下的 inherit 如果失效，则会继承父级的 color 属性，字体色彩会变为红色

initial 将元素初始化成 css 的初始值

<ul class="initial_ul">
    <li>initial 局部 </li>
    <li> 疾风劲草 </li>
    <li> 东方不败 </li>
    <li> 东方求败 </li>
</ul>

/* initial 将元素初始化成 css 的初始值 */
.initial_ul{font-size: 30px;}
.initial_ul li:last-of-type{font-size: initial;}

失常状况下，给 ul 设置字体大小为 30px，那么li 的字体大小也会继承为 30px，这里设置最初一个li 还原成 css 的初始值，上面是显示成果：

unset 关键字

unset关键字有两种状况，如果这个属性 有从父级继承的值 （这个属性默认能够继承，且父级有定义），则 该属性为继承父级属性 ，如果这个属性 没有从父级继承 ，那么这个属性会被 重置为 css 初始属性 。这里以dialog 对话框举例，对话框有默认款式，这些款式咱们是不想要的，能够应用 all:unset 进行批量重置。

<dialog open class="dialog_unset">unset 对话框 </dialog>

默认款式如下：

应用 unset 关键字重置

.dialog_unset{
       all : unset; /* 重置初始属性 */
       /* 这里写自定义的属性...*/
}

重置完后的成果：

其实 unset 就相当于 inherit 和initial的综合体，在 有继承 的状况下，相似于 inherit；在 无继承 的状况下，相似于 initial。
unset 能够利用于任何 css 属性。

revert 还原到浏览器内置款式

其实 revert 和initial有点像，只不过 initial == css 初始属性，而 revert == 浏览器默认款式

<ul class="revert_ul">
    <li> 让子弹飞 </li>
    <li> 楚门世界 </li>
    <li> 东方不败 </li>
    <li> 背道而驰 </li>
</ul>

/* revert 关键字 */
.revert_ul{
      list-style-type: none;  /* 勾销 li 圆点 */
      list-style-type: revert; /* 还原 li 为浏览器默认款式 */
}

失常状况下，这里设置了 list-style-type: none 之后，li的圆点应该被勾销，但前面 li 被重置为浏览器默认款式，所以 li 的圆点会呈现。

all 代指所有 css 属性

all的取值有四种：initial、inherit、unset、revert
all属性为 css 全局关键字的其中之一，all代指以后代码块的所有属性。
须要留神：unicode-bidi与 direction 这两个属性不受 all 影响。

<div class="father_all"> 父级 all
     <div class="children_all"> 子级 all</div>
</div>

/* all 关键字 */
.father_all{
     color: red;
     font-size: 30px;
}
.children_all{
     /*color : initial;*/  /* 只还原 color 的初始属性 */
     all : initial; /* 还原所有 css 属性为初始值 */
}

上述代码中，children_all继承了 father_all 所有属性，所以 children_all 的字体色彩为红色，字体大小为 30px，但因为all : initial 重置了 children_all 的所有属性，所以 children_all 的属性全副复原成 css 的初始值。
下面的 color : initial 只能还原单个元素，而 all 为全副元素。

案例源码：https://gitee.com/wang_fan_w/css-diary

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~