为什么边框颜色不传播到子元素？答案

【问题标题】：Why doesn't border-color propagate to child elements?为什么边框颜色不传播到子元素？
【发布时间】：2011-05-06 16:22:42
【问题描述】：

我有一个我正在构建的网站，其中包含深度嵌套的 div，并使用用户可选择的主题。我的问题是......为什么边框颜色不传播到子元素？

我已经在处理 DOM 样式表了，所以添加一个循环来更新边框颜色并不难。但是我很好奇为什么边框颜色不从父级继承，而是默认为文本颜色，并且边框样式仍不会默认为纯色是标准的（Firefox 和 Chrome，在 Linux 中）？

这种行为背后有什么智慧吗？我不是要装腔作势。我真的很好奇为什么这似乎是“设计使然”。

在我写这篇文章的过程中，我意识到最简单、最灵活的解决方案是将我的元素定义为 class="classname border"，然后更新边框类以反映正确的边框颜色。

不过，我还是不明白为什么？

这里有一段简单的 html 来演示这个问题...

<html>
  <head>
    <style type="text/css">
      .content{
        color: red;
        display: inline-block;
        border-width: 2px;
        border-style: solid;
        border-color: yellow;
      }
      .nested{
        color: green;
        display: inline-block;
        border-width: 2px;
        border-style: solid;
        margin: 3px;
      }
    </style>
  </head>
  <body>
    <div class="content">
    Content div. Red text, yellow border.<br>
      <div class="nested">
        Ignores parent border color. Defaults to text color.
      </div>
    </div>
  </body>
</html>

我不会问这个，除非我相当肯定这里有人真正评论了 rfc，并且有一些背景信息可能会阐明“为什么”。

谢谢。

跳过

【问题讨论】：

标签： html css

【解决方案1】：

边框颜色没有默认值。您需要使用 border-color: inherit; 手动告诉它从其父级获取其值

【讨论】：

在我测试之前，我投了赞成票，并将其标记为答案。但是如果继承是一个有效的值，这一切都说得通，而我只是个笨蛋！谢谢！
非常有效，通常是默认值。
好的，这就是诀窍。现在我唯一的障碍是嵌套堆栈中的所有内容都必须设置为边框颜色：继承，无论它是否有边框，或者边框颜色默认为第一个未继承父级的文本颜色。跨度>
我的测试表明它不是默认值。文本颜色是默认值。这就是我问题的症结所在，为什么默认不继承？
我发现“边框：4px 实心继承；”无效，必须按“border: 4px solid;border-color:inherit;”的顺序指定！

【解决方案2】：

这是一个老问题，我很震惊没有人提出这个解决方案。如果您采取以下步骤，您可以使用 CSS 轻松实现继承的边框颜色：

1) 在您的 css 文件中创建以下规则：

*{
    border-color:inherit;
}

2) 对于您希望使用继承的边框颜色的任何元素，首先应用未指定颜色的边框，然后继承父边框颜色。

.myThing {
    border:1px solid;     /* this will inherit the parent color as the border-color */
    border-color:inherit; /* this will inherit the parent's inherited border-color */
}

我们在第一步中创建的 css 规则将处理所有之前的元素border-color:inherit。然后在第二步中，我们需要手动覆盖这样一个事实，即任何没有指定颜色的边框都将继承父颜色而不是边框颜色。所以边框颜色必须在边框设置之后出现！

【讨论】：

【解决方案3】：

此行为在 CSS2 的 w3 规范中指定：Border Color

如果一个元素的边框颜色不是用边框属性指定，用户代理人必须使用的价值元素的“颜色”属性作为边框颜色的计算值。

【讨论】：

这是我看到的行为。我只是不明白为什么继承不是默认值。看起来您应该能够在身体上设置边框颜色，并且它会渗透到所有孩子，除非他们覆盖它。这并不是说边界应该继承。但是如果颜色默认为一个值，它应该默认为继承的边框颜色值。
我认为公平地说，在大多数情况下不需要继承 border，所以我可以看到为什么规范默认情况下不继承 border（朋友喜欢：@987654324 @)
如果它默认继承，那么你总是需要设置两次边框。首先是一种颜色，然后是所有子项都没有。

【解决方案4】：

默认情况下不继承边框。要更改此行为，请使用：

.nested {
    border:inherit;
}

这是小提琴：

http://jsfiddle.net/x8mcu/

【讨论】：

我觉得这看起来很有趣，所以我扩展了它并发现了一些意想不到的行为。在此处记录以节省其他人的一些测试工作。 jsfiddle.net/Djspaceg/x8mcu/20 元素似乎只从其直接父级继承，而不是从祖父级继承。要获得祖父母，父母都必须指定他们也继承。

【解决方案5】：

这是因为您指定特定 div（即内容）获取该特定模式。您可以更改操作方式以将选择器指定为 div 或者您可以堆叠类以使其发生（即，第一个为 class="content"，第二个为 class="content nested"。这将给出第二个div 内容和嵌套的样式。

【讨论】：

【解决方案6】：

我不想这样。边框通常不会递归到子元素中，否则您必须处理将每个子元素设置为border:none 或border-color:default 的问题。像字体颜色和样式这样的东西递归是有意义的。

【讨论】：

人们一直说你必须定义所有三个边框元素来显示边框、宽度、样式和颜色。事实上颜色将默认为文本颜色。我认为将其默认为父边框颜色会更明智。我当然不赞成继承边界。但是如果边框的属性将默认为一个值......它应该默认为父值，而不是文本颜色。

【解决方案7】：

关于继承边框颜色需要注意的一件重要事情-您特别不能告诉它继承，否则它将不会继承应用边框的元素的颜色属性-在 Andre 的 JSFiddle 示例中，您会看到内框边框是黄色的，但是文字是绿色的——去掉border-color:继承，然后边框会变成绿色，继承了元素的color属性。

这是在 Firefox 5.0.1/Win 上，以防其他浏览器出现不同的行为。

【讨论】：

【解决方案8】：

我有类似的问题，当我尝试继承边框颜色时，我正在继承父母的颜色属性。

拯救我的方法是：

.expanded-cell {
    border-style: solid;
    border-width: 3px;
}

.theme-border-color {
    border-color: #f39c11;
}

【讨论】：