我们在使用CSS给网站添加样式时，经常会用到覆盖，原则上，后添加的样式会覆盖前面的样式，但有时却会失效，这是为什么呢？今天让我们来探讨下，CSS覆盖失效的原因和解决办法。
如果前面的选择器中包含ID选择器，如#mAIn .link dt{}那么后面的选择器也必须包含ID选择器才能覆盖，否则无效。一定要记住ID选择器的特殊性，其他选择器没有这些限制。
以下HTML代码作为案例：
<div class='father'>
<div id='son'>
<div class='child'>
<div id='girl'><a href='#'>zuizhong</a></div>
</div>
</div>
</div>
CSS代码如下：
#son a{color: #FF0;}
#girl a{color:red;}
他们都包含ID选择器，那么他们谁在后面，就会覆盖前面的。
#father a{
color:red;}
.child a{
color: #FF0;
}
他们无论谁前谁后，样式始终是带ID选择器的为准。
.father #son a{
color:red;}
#girl a{
color: #FF0;
}
在这里样式以前面那个为准，因为他多了一个类别选择器father，比下面那个更特殊，所以无法覆盖。
.father .child a{
color:red;}
#girl a{
color: #FF0;
}
在这里，前面的看上去更特殊，因为他套了3层，由于第一个没ID，而第2个包含ID，所以还是以带ID的样式为准。
结论：特殊性ID选择器>类别选择器>标签选择器
当选择器中含有相同的选择器时，谁的选择器数量多，谁就更特殊。
要想覆盖前面的样式，特殊性必须是大于等于，否则无效！
