css样式优先级

css样式优先级

如果外部样式，内部样式和内联样式同时应用在同一个元素，就使用多中样式，

一般情况下：

外部样式《内部样式《内联样式（也叫行间样式）

但是顺序也是很重要的滴呀；

如果外部样式放在了内部样式的后面，则内部部样式将别覆盖；

选择器的优先权

解析：

1.内联样式（行间样式）的权值最高：1000；

2.id选择器的权值为100

3.class类选择器的权值10

4.html标签选择器的权值1

实例一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
  /*css 优先级的做法*/
  /*
    外部样式
    内部样式
    内联样式
    
  */
   #outer p{
       /*权值：100+1=101*/
       color:blue;   
   }
   #outer .inner em{
       /*权值：100+10+1=111*/
       color:red;   
   }
   #outer p span em{
       /*权值：100+1+1=103*/
       color:pink;
   }
</style>
</head>

<body>
   <div id="outer">
     <p class="inner">
       <span><em>font-family</em></span>
     </p>
   </div>
</body>
</html>

结果：

A 选择器都有一个权值，权值越大越优先；

B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

D 继承的CSS 样式不如后来指定的CSS 样式；

E 在同一组属性设置中标有“!important”规则的优先级最大

扩展阅读：

http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html