<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