CSS inherit和initial有什么区别？

Question

CSS inherit和initial有什么区别？

38

inherit和initial在CSS中有什么区别？对我来说，它们始终起着相同的作用，例如：

a.no-style{color: inherit}

将会执行相同的操作

a.no-style{color: initial}

- Jad Joubran

这可能会有所帮助：http://dev.w3.org/csswg/css-cascade/#initial-values - Felix Kling

1

看一下这个链接：http://www.w3schools.com/cssref/tryit.asp?filename=trycss_initial 如果你将 h1 {color: initial;} 改为 h1 {color: inherit;} 会发生什么？ - MattAllegro

当然会是红色的！ - Jad Joubran

7个回答

20

当父元素重新定义了颜色时，差异就会显示出来。

Inherit：使用父元素的绿色。

Initial：使用初始（黑色）颜色。

示例：

代码片段截图

.green{color:green;border:1px solid #ccc;padding:6px;}
a {color:blue;}
a.inherit {color: inherit;}
a.initial {color: initial}

<div class="green">
  Green text in this &lt;div><br>
  <a href="">&lt;a href=""></a><br>
  <a href="" class="inherit">&lt;a href="" class="inherit"></a><br>
  <a href="" class="initial">&lt;a href="" class="initial"></a>
</div>

- hultqvist

17

继承始终从文档树中的父元素进行，即使父元素不是包含块。初始标签只是为元素赋予其原始值。

- Joshua

11

inherit：

inherit关键字指定一个属性应该从其父元素继承其值。

示例

initial：

initial关键字用于将CSS属性设置为其默认值。

示例

- Muhammed Albarmavi

7

继承

该关键字应用于元素父级的值，

无论是否合理。有些CSS属性（如颜色或字体系列）会自动继承，但其他属性（如display或margin）则不会。inherit关键字可以适用于所有CSS属性。

初始值

该关键字应用于CSS规范中定义的初始值。有时这个初始值是有意义的（float:none），有时它只是出于历史原因存在（background-repeat:repeat），而有时规范制定者做了一种基本上是随意的但某种程度上可辩护的选择（color:black）。

更多请见Quirksmode网站

- vishnu

0

规范为每个属性设置了所谓的初始值，例如对于属性color和border-color，初始值为black。初始值不被称为默认值，在CSS中不存在这种表示法。

初始值通常已被用户代理覆盖。例如，display的初始值为inline，对于像p或div这样的块级元素，UA将设置值block。

每个属性都是继承的或非继承的，color属性是继承的，border-color属性不是。

如果未使用声明明确设置继承属性的值，则取父元素的计算值。

计算值是从指定值派生出来的，例如通过将单位mm转换为像素或将相对URL扩展为绝对URL。

如果将非继承属性的值明确设置为inherit，则取父元素的计算值，即该属性的行为就像它是继承的一样。

简而言之：声明property: initial;将初始值设置为规范中指定的初始值，声明property: inherit;将设置父元素的计算值。以下示例使用上下文选择器，即带有组合器的选择器来说明initial和inherit值。 p元素的属性color和border-color未指定，因此color属性的值从外部div元素继承，border-color属性的值默认设置为每个元素的color属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Initial vs Inherited</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    .frame{ border-style: solid; border-width: 3px; margin: 10px; }
    div{ color:blue; border-color: yellow; }
    body > div:first-child { color: red; border-color: lightgreen; }
    div:first-child { color: initial;  border-color: initial; }
    div div ~ div { color: inherit; border-color: inherit; }
  </style>
</head>

<body>
  <div class="frame">
     Color is red and border is green.
     <div class="frame">Color and border are black.</div>
     <p class="frame">Color and border are red.</p>
     <div class="frame">Color is red and border is green. </div>
   </div>
   <div class="frame">Color is blue and border is yellow.</div>
 </body>
 </html>

- Dietrich Baumgarten

-2

color: initial 不受 Internet Explorer 支持。

- user2251695

1

John Slegers是正确的： https://developer.mozilla.org/zh-CN/docs/Web/CSS/initial#Browser_compatibility - Lenny4

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ali Adravi · Accepted Answer

每个CSS属性定义摘要中给出的初始值对于继承属性和非继承属性具有不同的含义。

对于继承属性，仅在根元素没有为元素指定值时，使用初始值。

对于非继承属性，当元素没有指定值时，任何元素都会使用初始值。

在CSS3中添加了一个initial关键字，允许作者明确指定此初始值。

inherit关键字表示使用分配给我的父级的任何值。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value