详解css样式处理的优先级

想要对一个标签处理它的样式,可以用 class=“” 的方式来定义它的类,然后在类中处理他的样式 例如: .box{width:100px;height:

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

例如:


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

比如这样的问题:



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

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

优先级:

规则一:标签< class < id < 行内样式

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


例子一:

class 和 id比较

 




总结:

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

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



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

例:

总结:

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

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