Question

我有2个嵌套的div，都有

#x{
width:400px;
height:400px;
background-color:#fff;
color:#000
}

#y{
width:200px;
height:200px;
background-color:#000;
color:#ccc;
}


<div id="y"><div id="x">Here lies a x value</div></div>

我希望#x和#y具有单独的css属性，但事实并非如此，＃x会覆盖#y值

任何帮助表示感谢。

由于让

Answer 1

#y{
width:400px;<-- add px.
height:400px;
background-color:#fff;
color:#000
}

#x{ <--changed to X, it was y
width:200px;
height:200px;
background-color:#000;
color:#ccc;
}

此外，当您id div到x时，#x会删除您要删除的属性。

Answer 2

他们确实有个人财产。只是嵌套的x div位于y div的前面，因此y div被遮挡。尝试将overflow: hidden;添加到#y，您会看到它将#x限制为它的足迹。

Answer 3

特异性！由于您的两个声明具有相同的特异性，因此CSS中最后一个声明是尊重的声明。要增加内部目标的特异性，请尝试：

#y #x{
width:400;
height:400px;
background-color:#fff;
color:#000
}

#y{
width:200;
height:200px;
background-color:#000;
color:#ccc;
}

Here's a cracking article on the subject

嵌套的div应该有2种不同的css样式

3 个答案: