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样式优先级顺序到此结束
你们的关注是我持续更新的动力,求个关注!