Question

我有一个带有样式背景颜色的content-div：

#content { background-color: #FFF; }

conent div有3个这样的子div：

#content_right(middle,left) { float: left; width: 500px; }

html代码是：

<div id="content">
  <div id="content_left">...</div>
  <div id="content_middle">...</div>
  <div id="content_right">...</div>
</div>

我希望内容 - 背景颜色由child-divs继承，但它们不是。

似乎设置子div背景的唯一方法是为所有孩子单独设置它们。

问题：如何仅在父内容div中设置bg-color，以便样式传播到子div？

Answer 1

默认情况下，背景颜色通常被视为 transparent ，而不是 inherit 。使用 inherit ，背景图像将被复制到每个元素并被边距/填充/等移位（对背景图像的效果更明显）。

通常情况下，这并不重要，因为父母通常会变得足够大以容纳所有孩子（因此他们会通过父母的背景显示）。但是，由于您对所有孩子使用 float ， #content 的实际大小实际上并不是子div组合的大小。

浮动内容可以存在于其父级的范围之外。

如果没有任何静态内容， #content 的高度 0 ，而 content_left/right/middle 实际上存在于其下方（因为它们的内容为...，其高度默认为line-height）。

要更好地了解正在发生的事情，请尝试为儿童添加 #content 的高度和背景颜色（或使用“Inspect Element”和Chrome或Firebug中的标记突出显示）：

#content { background-color: #FFF; height: 5px; }
#content_right(middle/left) { float: left; width: 500px; background: #ccc; }

但是，是的，你需要在浮动div中指定背景颜色而不是它们的父颜色。

Answer 2

不完全确定你究竟在问什么，但肯定：

#content div { background-color: #FFF; }

是否是一个合适的解决方案？

Answer 3

尝试在CSS中声明你的孩子div，如下所示：

#content #content_right(middle,left) { float: left; width: 500px; }

Answer 4

此语法无效：

#content_right(middle,left)
{ float: left; width: 500px; }

正确的是：

#content_right, #content_middle, #content_left
{ float: left; width: 500px; }

我想你已经这样做只是为了让你的帖子在stackoverflow上缩短代码，但我建议你不要这样做。其他用户可能会认为语法有效并且在注意到它不起作用时会感到困惑。

Answer 5

如何将父级的CSS背景颜色传播给子div。

将子项的background-color属性设置为继承如下：

<html>
  <style>
    .header{
        background-color:#EEEEEE;
    }
    .leftChild{
        float:left;
        background-color:inherit;  //<--This says child inherit background color.
    }                           

    .rightChild{
        float:right;
    }
  </style>

  <div class="header">
    <div class="leftChild">abc</div>
    <div class="rightChild">def</div>
  </div>
</html>

只有一些属性会自动从父级继承。例如，如果边界是从父节点继承的，那么结果看起来会非常混乱，因为所有儿童都有边界。

默认情况下会继承前景色，但背景色不会。原因很明显：在大多数情况下，您希望前景颜色由子元素继承，但如果父元素具有背景图像，则您不希望子元素具有相同的图像，如他们的背景图片可能与他们父母的背景图片冲突。

css和divs - 父项的子项属性

5 个答案:

如何将父级的CSS背景颜色传播给子div。