Question


<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中？

Answer 1

div#b比#b更具体，因为您有一个元素选择器。第一个选择器指定要查找的元素类型，而第二个选择器表示只要它获取该ID就无关紧要。

div#b表示

仅查找ID为div的{{1}}。

而b表示

查找ID为#b的任何元素。

因此，根据特异性，第一条规则会覆盖第二条规则。

我不明白你的意思是b出现在#b里面，我的HTML结构方式看起来不错。另一方面，您没有#a的任何CSS规则，因此#a只有背景颜色。

编辑：如果您希望在另一个框内显示一个框，请为外框添加一些填充，当然还有背景颜色：

#b

Answer 2

CSS选择器致力于特异性。更具体的选择器意味着该选择器中定义的规则将用于支持不太具体的选择器。

通常：

元素选择器（如div，img等）的权重为1
类选择器（例如.myClass）的权重为10
id选择器（如#myId）的重量为100

通过这个，你可以很容易地确定上述失败的原因。

div#b = 101
#b = 100

101＆gt; 100

Answer 3

对于某些css规则参考，请参阅：

http://css-tricks.com/specifics-on-css-specificity/
http://htmlhelp.com/reference/css/structure.html#syntax

使用display：inline使div 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>

Answer 4

“我的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>

你应该在内部div的左侧，右侧和底部看到一条细线绿色（约5px宽）。这不是获得此效果的唯一方法。

关于css中级联规则的问题

4 个答案: