CSS 属性的继承值、初始值和未设置值

所有的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}
Published At
Categories with 技术
Tagged with
comments powered by Disqus