为什么继承的border-color属性变得无效？

时间：2014-09-03 17:56:38

标签： html css colors border

我在div元素中有一个div元素。外部div具有color和border-color的样式属性。内部div继承它。

<html>
  <head><style>#foo{color: red; border-color: green;}</style></head>
  <body>
    <div id="foo" style="border-width: 6; border-style: solid; padding: 10;">
      <div style="border-width: 6; border-style: solid; height: 10;"></div>
    </div>
  </body>
</html>

当我在浏览器上渲染它时，外部div的边框呈现为绿色，正如预期的那样，但内部div的边框呈现红色，这对我来说意外。

embedded divs

当我查看Google Chrome开发人员的工具时，color和border-color属性对外部div都有效：

outer div

但对于继承属性的内部div，color有效但border-color无效，因此边框颜色变为红色，这是{{{{1}指定的颜色1}}属性：

inner div

为什么继承的color属性无效？有没有办法使它有效？

2 个答案:

答案 0 :(得分：3)

根据定义，border-color不会被继承（除非您明确地为其分配值inherit）。内部div上没有border-color，因此它采用初始值，根据定义，该值是元素的color属性的值。

因此，您需要在元素上明确设置border-color。

答案 1 :(得分：2)

因为border-color与某些css属性不同，所以inherit没有默认值。

因此您必须将其指定为border-color: inherit。

http://jsfiddle.net/3f8vgd35/

W3 Description声明它是继承：否

相关问题
最新问题