<style>
div#b {
background-color:blue;
}
#b {
background-color:red;
}
</style>
<div id='a'> div a
<div id='b'>
div b
</div>
</div>
我對這個樣式和這個html有兩個問題。爲什麼div b需要藍色。我想知道層疊規則，我可以更多地瞭解它？我的第二個問題是我應該如何處理CSS讓div b出現在div a中？css中的級聯規則問題
CSS選擇上的特異性工作。更具體的選擇器意味着在該選擇器中定義的規則將被用於偏向於不太具體的選擇器。
作爲一個規則：
由此您可以很容易地確定上述失敗的原因。
div#b = 101
#b = 100
101> 100
酷計算 – 2010-12-17 18:52:31
div#b比#b更具體，因爲您有一個元素選擇器。第一個選擇器指定要查找的元素的類型，而第二個選擇器指出只要它拿起該ID就無關緊要。
div#b意味着
查找只有
divID爲b。
#b同時意味着
查找其ID是
b的任何元件。
因此，通過特殊性，第一條規則將覆蓋第二條規則。
我不明白你的意思是讓#b出現在#a裏面，這對你的HTML結構很好。另一方面，您沒有任何關於#a的CSS規則，所以只有#b的背景顏色。
編輯：，如果你想在盒子裏面的另一個盒子的外觀，給外包裝箱一些填充，當然背景色：
#a {
background-color: yellow;
padding: 1em;
}
我的意思是當前屏幕上，如果我給div一個綠色的顏色兩個div出現在兩個不同的行綠色和藍色。我想要一個藍色的盒子放在一個綠色的盒子裏。 – 2010-12-17 18:45:00
此外，我可以學習你決定div＃b更具體的方式是有一些在線參考。 – 2010-12-17 18:45:59
你可以在這裏找到特異性評分表（http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#specificity）。 – BoltClock 2010-12-17 18:47:24
對於一些CSS規則引用看到：
http://css-tricks.com/specifics-on-css-specificity/
http://htmlhelp.com/reference/css/structure.html#syntax
使用顯示：內聯，使格B將出現內：
<style>
div#b {
background-color:blue;
display: inline;
}
#b {
background-color:red;
}
</style>
<body>
<div id='a'> div a
<div id='b'>
div b
</div>
end div a
</div>
「我的div顯示爲行」的問題是因爲div內部的寬度與外部div的寬度相同（默認值）。
嘗試以下操作：
<style>
div.inside
{
background-color: red;
padding: 5px;
}
div.outside
{
background-color: green;
padding: 5px;
}
</style>
<div class="outside">
This is text in the outside div.
<div class="inside">
inside
</div>
</div>
你應該可以看到綠色的左邊一條細線（約5像素寬），右和內部DIV的底部。 這不是獲得這種效果的唯一方法。
您想確保您正確使用'ID'和'CLASS'，出於某種原因，人們總是重新使用ID ... ** facepalm ** – Jakub 2010-12-17 18:46:07
儘量保持每個帖子有1個問題。如果您有2個問題，請發2個帖子。 – DwB 2010-12-17 19:15:46