CSS inherit和initial有什么区别？

icomxhvb 于 2023-05-02 发布在其他

关注(0)|答案(7)|浏览(140)

inherit和initial在CSS方面有什么区别？对我来说，它们总是一样的，例如：

a.no-style{color: inherit}

会做同样的事

a.no-style{color: initial}

css

来源：https://stackoverflow.com/questions/29661278/whats-the-difference-between-css-inherit-and-initial

7条答案

按热度按时间

fjaof16o1#

每个CSS属性定义的摘要中给出的初始值对于继承和非继承属性有不同的含义。
对于继承的属性，如果没有为根元素指定值，则只对根元素使用初始值。
对于非继承的属性，当没有为元素指定值时，对于任何元素使用初始值。
CSS3中添加了一个initial关键字，允许作者显式指定此初始值。
inherit关键字意味着使用分配给我的父节点的任何值。
来源：https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value

赞(0）回复(0）举报 2023-05-02

yqyhoc1h2#

继承总是来自文档树中的父元素，即使父元素不是包含块。初始标记只是给元素提供其原始值。

赞(0）回复(0）举报 2023-05-02

nxagd54h3#

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

**继承：**使用父元素的绿色。
**初始：**使用初始（黑色）颜色。
示例：

.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>

赞(0）回复(0）举报 2023-05-02

brjng4g34#

继承：
inherit关键字指定属性应从其父元素继承其值。
example
姓名首字母缩写：
initial关键字用于将CSS属性设置为其默认值。
example

赞(0）回复(0）举报 2023-05-02

wvt8vs2t5#

继承
此关键字应用元素的父元素的值，
不管这有没有道理某些CSS属性（如color或font-family）是自动继承的，但其他属性（如display或margin）则不是。inherit关键字应该对所有CSS属性都有效。
初始的
此关键字应用CSS规范中定义的初始值。有时这个初始值是有意义的（float：无），有时是由于历史原因（背景-重复：重复），有时规范编写者会做出一个基本上随机的，尽管有些可辩护的选择（颜色：黑色）。
更多来自Quirksmode网站

赞(0）回复(0）举报 2023-05-02

beq87vna6#

1.该规范为每个属性设置所谓的初始值，对于属性color和border-color，例如值black。初始值不称为默认值，最后一个符号在CSS中不存在。
1.初始值通常已经被用户代理覆盖。例如，display的初始值是inline，对于像p或div这样的块元素，UA设置值block。
1.每个属性要么继承要么不继承，color属性是继承的，border-color属性不是。
1.如果继承属性的值没有通过声明显式设置，则采用父元素的计算值。
1.例如通过将单位mm转换为像素或通过将相对URL扩展为绝对URL，从指定值导出计算值。
1.如果非继承属性的值被显式设置为inherit，则采用父元素的计算值i。财产的行为就像是继承的一样。
简而言之：声明property: initial;设置规范中指定的初始值，声明property: inherit;设置父元素的计算值。以下示例使用上下文选择器i说明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>

赞(0）回复(0）举报 2023-05-02

ezykj2lf7#

Internet Explorer不支持color : initial。

赞(0）回复(0）举报 2023-05-02