CSS优先级你知道怎么用吗？

作者佚名技术来源 CSS技术浏览发布时间 2012-03-02

css优先级的四大原则：

原则一：继承不如指定

如果某样式是继承来的永远不如具体指定的优先级高。
例子1：
CODE:
<style type="text/css">

</style>
<span class="class3">我是多大字号？</span>

运行结果：.class3{ font-size: 12px; }

例子2：

CODE:
<style type="text/css">

</style>

<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号？</span> </p>
</div>

运行结果：.class3{ font-size: 12px; }

注意：后面的几大原则都是建立在“指定”的基础上的。

原则二： #ID > .class > 标签选择符

例子：
CODE:
<style type="text/css">

</style>

<span id="id3" class="class3">我是多大字号？</span>

运行结果：#id3 { font-size: 25px; }

原则三：越具体越强大。

解释：当对某个元素的CSS选择符样式定义的越具体，层级越明确，该定义的优先级就越高。
CODE:
<style type="text/css">

</style>

<div class="class1">
<p class="class2"> <span class="class3">我是多大字号？</span> </p>
</div>

运行结果：.class1 .class2 .class3{font-size: 25px;}

原则四：标签#id >#id ; 标签.class > .class

上面这条原则大家应该也都知道，看例子
CODE:
<style type="text/css">

</style>
<span id="id3">我是多大字号？</span>
<span class="class3">我是多大字号？</span>

运行结果：span#id3{font-size:18px} | span.class3{fo

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 4 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS Sprite优化:减少HTTP链接数下一篇: css的优先级和!important与ie6的BUG

关于CSS优先级你知道怎么用吗？的所有评论

随机推荐