css优先级

css的优先级是怎么回事
css优先级是怎么样使用的,给我举个例子
我知道那些优先级数字怎么算,我不知道那些数字怎么用

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是重点。

  样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

•浏览器缺省设置
•外部样式表
•内部样式表(位于 <head> 标签内部)
•内联样式(在 HTML 元素内部)
  因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。这只是一个大方面的优先级,在前面文章中我们讲过CSS有很多选择器,那么对于同种样式的CSS,各个选择器的优先级又是如何呢?

  我们将某一个CSS看成一个三位数,通过比较数字的大小来获取优先级的高低,那么就会相当简单。在这里可以通过下面的规则来定义各个选择器对应的数字。

•百位数是该选择器上的id的数量的总和;
•十位数是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red]);
•个位数是计算元素(就像table、p、div、*等等)和伪元素(就像:first-line等);
•如果两个选择器对应的数字相等,也就是具有同样的优先级,在样式表中后面的那个起作用。
•标有"!important"的规则具有最高优先级,例如H1{color:black !importan; font-family:sans-serif},前景色被标为important,这个前景色具有很高的优先级。但是这种声明容易引起混乱,因此通常使用得较少。
选择器 数值
h1 {color:blue;} 1
p em {color:purple;} 1 + 1 = 2
.apple {color:red;} 10
p.bright {color:yellow;} 1 + 10 = 11
p.bright em.dark {color:brown;} 1 + 10 + 1 + 10 = 22
#id316 {color:yellow} 100

一般我们还可以通过浏览器的插件来查看,到底哪个CSS起作用,比如Firebug(Firefox)、Developer Tools(IE8)等。上面我们介绍到当优先级相同时,哪个CSS起作用取决于所处的位置,通常后面的CSS优先级要高。但是对于IE浏览器,具有相同数值的动态CSS取决于添加的顺序前后,而不是添加的位置前后;后添加的优先级要高。追问

我就是不知道那些1122怎么用

追答

原则一 - 继承不如指定。
原则二 - #ID > .class > 标签选择符。
原则三 - 越具体越强大。
原则四 - 标签#id >#id ; 标签.class > .class。
原则五 - 原则一 > 原则二 > 原则三 > 原则四。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2011-07-15
.a{color:red;}
#b{color:blue;}
<span class='a' id='b'>1111111</span>
两个样式都给了,而且是 两个不同的 COLOR,这时 要取哪个颜色呢?
在这里就出现了 优先级 , ID 为优先 也就是说 颜色会变成 BLUE 而不是 RED
第2个回答  2011-07-08
也就是css的继承,比如改写写代码:
第3个回答  2011-07-08
css样式就近原则
例如在<head></head>之间设置样式
.aa{color:red;}
<div class="aa">aaaa</div>//这样aa中的字体就是红色
<div class="aa" style="color:green">aaaa</div>//这样aa中的字体就是绿色

就近原则 一个元素设定了几个样式 离这个元素最近的样式起作用
第4个回答  2011-07-08
一般常用的分为3种:
1.内联最优先,比如<div id="a" style="border:1px solid;" width="100px"></div>这里边的style就是样式
2.内部样式次之。比如<body><style>#a{border:1px solid;}</style><div id="a"></div></body>。style写在<head>中也可以
3.外部样式了,在html中写内容,然后在css中写样式,写法跟第二种一样,不需要加<style>,定义id的用#名称,class的用.名称。
相似回答