Css样式优先级问题

目录(?)

[+]

想要对一个标签处理它的样式，可以用 class=“” 的方式来定义它的类，然后在类中处理他的样式

例如： 

[html]  view plain  copy

 print ?

1. <style>  
2.      .box{width:100px;height:100px;background:#0f0}  
3. </style>  
4.   
5. <div class="box" ></div>  

当然也可以用 id ，或者干脆直接对标签写样式，然而如果把这些定义都放在了一个元素中的时候，就蒙圈了，计算机到底先处理谁呢？需要更改的时候，改哪个呢？

比如这样的问题:

[html]  view plain  copy

 print ?

1. <style>  
2. div{}  
3. .aa{}  
4. #bb{}  
5. </style>  
6. <div class="aa" id="bb"  style="xxx:xxx"></div>  

里面既定义了 标签 div 又定义了 类aa 还定义了 bb,而且又在里面定义了 行内样式 style="xxx:xxx" 那么如果我要更改的话，到底改谁呢。这就涉及到一个css 样式优先级的问题了。

经过总结：得到如下经验：

优先级：

规则一：标签< class < id < 行内样式 <!import  

规则二：同级元素以顺序排序作为判断依据:下面的覆盖上面的

例子一:

class 和 id比较

[html]  view plain  copy

 print ?

1. <style>  
2. .hh{clear:both}  
3. #bo{background:#0f0;width:100px; height:100px} /*绿色*/  
4. .box{width:50px;height:50px;background:#00f;float:left}  
5. </style>   
6.   
7. <div class="box"></div>  
8. <div class="box" id="bo"></div>  

总结：

一、优先级高的 如果定义的属性和优先级低的定义的属性相冲突，那么会覆盖优先级低的

二、优先级低的定义的属性，优先级高的没有再次定义，那么会继承优先级低的

---

同级元素以顺序排序作为判断依据:下面的覆盖上面的

例：

[html]  view plain  copy

 print ?

1. <style>  
2. .box1{width:100px;height:100px;}  
3. .box1{background:#0f0}      /*绿色*/  
4. .box1{background:#f00}      /*红色*/  
5. </style>  
6.   
7. <div class="box1"></div>  

总结：

一：优先级相同级别的情况下，系统按照最后一次定义的属性为标准。下面覆盖上面的

原因:浏览器解释html 语言的方式是从上往下，从左往右的解释，通过解释完所有样式得出最终结果才会显示出来