标签：style class blog code java http
网页开发中遇到不少次关于样式另类的问题，于是想把从网上找的帖子和自己想到的做一个简单的规整。
在此推荐文章：http://www.cnblogs.com/ccdc/p/2765827.html
原则一：内嵌样式->内部样式->外联样式,优先级依次排列
如果外联样式放在内部样式后，将会覆盖内部样式。
ex:
<html> <head> <title>css优先级</title> <style type="text/css"> .priority {color: #00ff00;} </style> </head> <body> <div class="priority">公告</div> </body> </html> <link rel="stylesheet" type="text/css" href="/Content/priority.css"> <!--color:#ff0000;-->
结果：
| 公告 |
原则二：明确指定添加样式的元素，使有层次
ex:
<html> <head> <title>css优先级</title> <style type="text/css"> div p span.priority {color: #00ff00;}/*1*/ .priority {color: #ff0000;}/*2*/ </style> </head> <body> <div ><p><span class="priority">公告</span></p></div> </body> </html>
结果：写法1要优先于写法2。
| 公告 |
原则三：css选择器特性
| css选择器 | 特性值 |
| id选择器：# | 100 |
| className：. | 10 |
| html标记：span | 1 |
原则二中的例子也可以这样解释：写法1选择器的特性值为1+1+1+10=13，写法1选择器的特性值为10。很明显根据特性值的大小
可以决定写法1要优先于写法2。
原则四：!important
在一组样式表中，如果样式有声明!important，表示优先级高。
ex:
<html> <head> <title>css优先级</title> <style type="text/css"> .priority {color: #ff0000;color: #0000ff !important;} </style> </head> <body> <div ><p><span class="priority">公告</span></p></div> </body> </html>
体现这四个原则的例子在IE7~9,chrome,firefox,safari,搜狗,360浏览器都支持
五：@import
写到这顺便提一下@import
，@import与link的区别在于：@import先加载页面再加载样式表，link先加载样式表再加载页面。所以在网速慢的情况下
如果使用@import加载页面时会出现跑版的瞬间。
@import只能加载样式表，不能像link一样添加rel,style等属性。
个人不建议使用@import
标签：style class blog code java http
原文地址：http://www.cnblogs.com/paulhe/p/3778590.html
