CSS优先级包含四个级别（文内选择器，ID选择器，Class选择器，元素选择器）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。
CSS优先级的计算规则如下：
* 页面中直接设置style,加1,0,0,0
* 每个ID选择器(如 #id),加0,1,0,0
* 每个Class选择器(如 .class)、每个属性选择器(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择器（如p）或伪元素选择器(如 :firstchild)等，加0,0,0,1
然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，
然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。
例子：
css文件或<style>中如下定义：
1. h1 {color: red;}
/* 一个元素选择符，结果是0,0,0,1 */
2. body h1 {color: green;}
/* 两个元素选择符，结果是 0,0,0,2 */
3. h2.grape {color: purple;}
/* 一个元素选择符、一个Class选择符，结果是 0,0,1,1*/
4. li#answer {color: navy;}
/* 一个元素选择符，一个ID选择符，结果是0,1,0,1 */
5. 元素的style属性中如下定义：h1 {color: blue;}
/* 页面中定义，一个元素选择符，结果是1,0,0,1*/
如此以来，h1元素的颜色是蓝色。
注意：
1、!important声明的 ......
看看下面这段代码，是否倍感亲切但又觉得很陌生呢：
.test {
background-color: black; /* firefox, opera, ie8 */
[;background-color: green;] /* safari, chrome */
*background-color: blue; /* ie7 */
_background-color: red; /* ie6 */
}
html*~/**/body .test {
border: 5px solid red; /* ie8 */
}
随着浏览器的更新换代，CSS Hack 变得越来越诡异和不可靠了-.-
相对来说，IE 的条件注释是值得信赖的：
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->>
<!--[if !IE]>--><body><!--<![endif]-->
<style type="text/css">
body.ie6 .test { background-color: blue }
body.ie7 .test { background-color: red }
body.ie8 .test { background-color: green }
</style>
注意，上面的代码虽然也是 hack，但大大简化和规范了 css hack 的写法。
最近看 ExtCore 3.0 的代码，发现 Ext 初始化时会自动给 body � ......
碰到好些问题，Firefox下面看着很完美，ie6下面就惨不忍睹，还好，一点点慢慢解决了。一些东西摘录一下，以后也许用得到。
DIV+CSS解决IE6，IE7，IE8，FF兼容问题
那我来说说吧，做了几年的DIV+CSS，也积累了不少解决兼容问题的方法，我这里只说现在主流的几个，（IE6，IE7，IE8，FF）其它的没去研究过
1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如
margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px
3.清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景 断开或差一小块。这种兼容出现的不太多，我做到现在，只遇到过两次，方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性， 中文什么意思我不知道，我英语差，但能达到想要的效果，6 e” Z+ e% |8 G# |
4.很多朋友DIV+CSS的时候� ......
CSS 基础语法
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 语法由三部分构成：选择器、属性和值：
Eg: selector {property : value}--àbody {color: blue};
值的不同写法和单位
除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000; }
为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00; }
我们还可以通过两种方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。 ......
CSS（Cascading Style Sheets）层叠样式表。
·传统HTML页面排版和显示效果设置方面的问题。
·引入CSS后：Html标记专门用于定义网页的内容，而是用CSS来设置其效果。
CSS分类：
内嵌样式（Inline Style）：以属性形式直接在HTML标记中给出，用于设置该标记所定义的信息效果。例如：
<body style ="background-color:#ccffee;">
<p style = "font-size:16px;color:red">第一段</p>
</body>
内部样式表（Internal Style Sheet）：在<head>标记中给出，可以同时设置多个标记所定义的信息效果。对当前页面有效，例如：
<html>
<head>
<style type = "text/css">
body{background-color:#ffeecc}
p.mystyle1{font-size:20px;font-color:blue}
p.mystyle2{font-size:40px;font-color:red;text-align:center}
</sty ......
CSS兼容性一直是大家头疼的问题，现在说说如何区分这几个浏览器，IE6、IE7、IE8和FF，IE8均指IE8正式版,版本号:8.0.6001.18702。
以颜色为例来说如何区分这几个浏览器：
.csshack{
color:#f00; /*firefox等对css支持好的浏览器 显示为红色*/
color:#00f\9; /*IE8可识别 覆盖上面规则 显示为蓝色*/
*color:#0f0!important; /*IE7可识别 覆盖上面规则 显示为绿色*/
*color:#000;/*_color:#000;*/ /*IE6可识别 覆盖上面规则 显示为黑色*/
}
这里的"\9"可以区别所有IE� ......
最新文章 :