1 
<html>
<head>  
    <style>
        #wrap{
            width: 800px;
            background-color: black;
            color: red;
        }



        #right{
            float: right;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="right">
            <h1>RIGHT</h1>
        </div>
    </div>
</body>

この例では、背景色ではなくテキストの色のみが継承されているためです。誰かが私に理由を説明できますか?

4

2 に答える 2

3

このcolorプロパティは、設定されていない場合は親から継承されるようにCSS 標準で定義されています (「継承:はい」セクションに注意してください)。background-colorプロパティはそうではありません (デフォルトはtransparentで、「継承:いいえ」があります)。ただし、これはいつでも実行できます。

#right
{
    float: right;
    background-color: inherit;
}

に設定background-colorするとinherit、まさにそれが行われます。

于 2012-07-06T16:23:57.037 に答える
0

overflow:auto;これを実現するために #wrap に追加できます。

#wrap{
    width: 800px;
    background-color: black;
    color: red;
    overflow:auto;
}

jsFiddle の例

于 2012-07-06T16:23:05.850 に答える