嵌套的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;
}

這是一篇有關該主題的開篇文章 。