嵌套的div应该具有2个diff CSS样式

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;
}

另外，当您将div id为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;
}

这是一篇有关该主题的开篇文章 。