[转载]CSS的优先级
by 晴方好玲
at 2013-05-02 15:00:08
original http://blog.sina.com.cn/s/blog_897db7b50101b4ed.html
1、标有"!important"的规则拥有1级优先级
2、标有"style"属性的规则拥有2级优先级
3、附有"id"的规则拥有3级优先级
4、附有"class"的规则拥有4级优先级
5、标签名"如：p、div、h1"直接定义的规则拥有5级优先级
1）同一级别的规则，遵守"最近优先"的原则
2）作者定义的规则优先级高于浏览器默认的规则
如：!important > style > #id
> .class > 标签选择符 >
通配符
网上有人用"吨"来形容CSS的优先权重，看下图:
一、标签#id > #id; 标签.class >
.class;
id:
p#id-tit{
font-size:18px;
}
#id-tit-one{
font-size:12px;
}
<p
id="id-tit">测试文字</p>
<p
id="id-tit-one">测试文字</p>
class:
p.class-tit{
color:red;
}
.class-tit-one{
color:blue;
}
<p
class="class-tit">测试文字</p>
<p
class="class-tit-one">测试文字</p>
二、具体情况要多测试
#all{
color:red;
}
.one .two .three{
color:blue;
}
.three{
color:green;
}
//文字是什么颜色？如果给第2段加上","号会如何?
.one, .two, .three{
color:blue;
}
//这就需要具体情况具体测试，光靠猜往往会出乎你的意料。
<div id="all">
<span
class="one">
<span
class="two">
<span
class="three">
测试文字
</span>
</span>
</span>
</div>
看了CSS的优先规则似乎很清晰，但看了上面的例子感觉又糊涂了，抓破了头皮也没用，WEB开发存在着很多隐含的问题，只有发现一个记录一个，多学习多测试，掌握规律就好。
