的优先级大小_web前端实战教程-css优先级顺序

css声明顺序优先级

CSS属性指定方式：

默认缺省

外联样式

内联样式

行内样式

顺序：

缺省

id>class

多类情况下属性越靠后优先级越高

说明:

缺省设置就是浏览器的缺省设置，不同的浏览器对元素的默认规则是不一样的

外部样式就是在head内部引用的样式文件，比如：

行内样式指的在元素标签内直接指定样式，比如:

小提示:

要在行内对一个元素同时指定多个样式属性的时候，我们可以把指定的属性用“：”隔开，比如：

最后一个元素值的”;”可有可无

多类覆盖优先级:

比如：

Css文件中写:

div{width:100px;weight:50px;background-color:red;}.fl{float:left;}.fr{float:right;}

那么这个div到底向右浮动还是向左浮动？

答案是向右浮动，为什么是向右浮动？新手一般会认为，class=”fl fr”,fr在后面嘛，但事实是：在多个类指定的属性的时候，属性生效的优先级不跟指定属性的类名先后顺序有关，而是跟css文件里面的.fl和.fr先后顺序有关，我们把css里面的.fl属性声明和.fr属性声明调换一下位置,div的浮动属性就变成左浮动了!

我们得出的答案是:属性声明越靠后面，它的优先级越高！

进一步探讨:当一个元素指定了多个类名，多个类名里面的属性声明冲突了优先级谁高?

我们把css文件里面的fl和fr里面都加上font-size属性:

.fl{Float:left;Font-size:24px;}.fr{Float:right;Font-size:12px;}

效果是:里面的字体是12px，再次验证了属性声明越靠后，优先级越高!

再进一步探索，如果我们在同一个类声明里面声明了两个元素属性那？

比如:

.fl{Font-size:24pxFont-size:12px;}

结果是:

• 浏览器会报错，说”浏览器包含这个属性规则”(打开firebug工具可以看到)
• 优先级依然遵循了属性声明越靠后，优先级越高!字体的大小是12px

ID优先，类靠后

比如：

我们在css文件里面指定:

#myid{Float:left;}.fr{Float:right;}

虽然fr的float声明靠后，但是id属性优先啊，所以，这个div打死都不会向右浮动！

Id class 行内样式并存

例如：

那么这个div是向左浮动还是向右浮动?

答案是向右，因为不管是id和class，都是内联样式，行内样式优先级是高于内联样式的

关于css样式优先级顺序到此结束

你们的关注是我持续更新的动力，求个关注！