目录

1. 第一题
2. 第二题
3. 第三题
4. 第四题
5. 第五题
6. 第六题

       上一篇文章我们看了css三大特性，其实最难得就是优先级的那部分，也不能说难，就是很墨迹而已，在这里我找了六个公司面试css权重的面试题，让我们来看一看吧。

1. 第一题
   

<div id="father" class="c1">
<p id="son" class="c2">
试问这行是什么颜色的?
</p>
</div>
<style>
#father #son {
color: blue;
}
#father p.c2 {
color: black;
}
div.c1 p.c2 {
color: red;
}
#father{
color:green !important;
}
</style>

       其实这个第一题就有点意思，我们这六个题就主要的讲讲第一个和最后一个吧。

              先看第一个样式它不属于继承，权重为0200.

              第二个样式它也不属于继承，权重为0111.

              第三个样式它也不属于继承，权重为0022.

              第四个属于继承，不管它后面有什么，哪怕时权重无限大的那个，继承的权重都为零。

       那么合理的分析之后就会发现它时蓝色。

1. 第二题
   

<style>
#father {
color: red;/*权重为零*/
}
p {
color:blue;/*权重为0001*/
}
</style>
<div>
<p>试问这行文字是什么颜色的?(blue)</p>
</div>

1. 第三题
   

<style>
div p {
color:red;/*0002*/
}
#father {
color:red;/*0*/
}
p.c2 {
color:blue;/*0011*/
}
</style>
<div id="father" class="c1">
<p class="c2">试问这行文字是什么颜色的?(blue)</p>
</div>

1. 第四题
   

<style>
div div div {
color:blue;/*0003*/
}
div {
color:red;/*0001*/
}
</style>
<div>
<div>
<div>
试问这行字体是什么颜色的?(blue)
</div>
</div>
</div>

1. 第五题
   

<style>
div div {
color:red;/*0002*/
}
.me{
color;/*0010*/
}
</style>
<div>
<div>
<div class="me">
试问这行字体是什么颜色的?(blue)
</div>
</div>
</div>

1. 第六题
   

<style>
.c1 .c2 div {
color:blue;/*0021*/
}
div #box3 {
color:green;/*0101*/
}
#box1 div{
color:yellow/*0101*/
}
</style>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
试问这行字体是什么颜色的?
</div>
</div>
</div>

       其实这个以前没有什么特殊的，就是第二个样式和第三个样式的权重是一样的，那么就按照css层叠性的关系，字体就是黄色的了。