Question

我有一个我正在构建的网站，它有深层嵌套的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，并且有一些背景资料可能会对'为什么'有所了解。

感谢。

跳过

Answer 1

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

获取其值

Answer 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。然后在第二步中，我们需要手动覆盖这样一个事实：任何没有颜色指定的边框都将继承父颜色NOT border-color。所以边框颜色必须在边框设置后出现！

Answer 3

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

如果元素的边框颜色不是用border属性指定的用户代理商必须使用的价值元素的'颜色'属性为边框颜色的计算值。

Answer 4

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

.nested {
    border:inherit;
}

这是小提琴：

http://jsfiddle.net/x8mcu/

Answer 5

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

Answer 6

我不想要它。边框通常不会递归到子元素中，或者您必须处理将每个子元素设置为border：none或border-color：default。像字体颜色和风格这样的事情是有意义的。

Answer 7

关于边界颜色继承的一个重要注意事项 - 你必须不要告诉它继承，否则它不会继承边框应用的元素的颜色属性 - 在Andre的JSFiddle示例中，你会看到内框边框为黄色，但文本为绿色 - 删除border-color：inherit，然后边框将变为绿色，继承元素的color属性。

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

Answer 8

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

节省我一天的方法是：

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

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

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

8 个答案: