所有的css属性都有3个共同的基本值:Inherit、Initial和Unset。Inherit和Initial已经存在很长时间了,但Unset是一个新添加的词。这些值的作用有时会令人困惑,所以下面是一个细目:
- Inherit:从父元素中获取属性。
- 初始:属性的默认值(浏览器的默认值)。
- unset:充当继承或初始。如果父级具有匹配的值,则它将充当Inherit,否则它将充当初始。
这里有一个例子,使是明确的。这是我们的标记:
1<div class="wrapper">
2 <p class="one">Snake<p>
3 <p class="two">Lizard<p>
4 <p class="three">Alligator</p>
5 <p>Komodo Dragon</p>
6</div>
下面是我们的css:
1.wrapper { color: orange; }
2
3.wrapper p { color: purple; }
4
5p.one { color: inherit; }
6
7p.two { color: initial; }
8
9p.three { color: unset; }
- Snake 为橙色,继承自包装器div。
- 蜥蜴 为黑色,取浏览器初始缺省值。
- 鳄鱼 是橙色的,在本例中,Unset充当Inherit,因为存在具有匹配值的父级。
- Komodo Dragon 为紫色,这是唯一一个从.wrapper p选择器中获取其值的段落。
👉取消设置的一个巧妙技巧是与All速记结合使用,它会自动影响选择器的所有属性。以下操作取消设置所选p个元素的所有属性:
1article p {
2 all: unset;
3}