CSS全局关键字

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

CSS全局关键字

2023-03-01 22:54:38 来源：博客园

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

【资料图】

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

下面分别说说这几个关键字的实际作用

inherit 继承父级属性

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

父级容器        子级容器

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

按照执行顺序，color:blue会被覆盖，children下的inherit如果生效，则会继承父级的color属性，字体颜色会变为红色

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

    initial部分
    疾风劲草
    东方不败
    西方求败

/* 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进行批量重置。

unset对话框

默认样式如下：使用unset关键字重置

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

重置完后的效果：其实unset就相当于inherit和initial的综合体，在有继承的情况下，类似于inherit；在无继承的情况下，类似于initial。unset可以应用于任何css属性。

revert还原到浏览器内置样式

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

    让子弹飞
    楚门世界
    东方不败
    南辕北辙

/* 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、revertall属性为css全局关键字的其中之一，all代指当前代码块的所有属性。需要注意：unicode-bidi与direction这两个属性不受all影响。

父级all     子级all

/* 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

如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~

关键词：初始属性字体大小所有属性