一千萬個為什麽

搜索

嵌套的div應該有2個diff css樣式

我有兩個嵌套的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值

任何幫助贊賞。

謝謝 吉恩

最佳答案

特異性!由於您的兩個聲明具有相同的特異性,因此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個diff css樣式