天天看点

什么用于标记CSS样式的使用优先级,css !important用法以及CSS样式使用优先级判断...

例一:

CSS

#box {

color:red !important;

color:blue;

}

HTML

在不同的浏览器下,这行字的色应该不同!

这个例子应该是大家经常见到的important的用法了,在IE6环境下,这行字是蓝色,在IE7及firefox下,为红色。这是因为IE6不认important(即不认 !importmant 但是还是认!important前面的color:red),并且color:blue放在color:red的后面(后面的css定义覆盖了前面的color:red),所以在IE6下字为蓝色;而在IE7及firefox下important级别优先,所以color:red !important;和color:blue;的前后顺序没有关系,在IE7及firefox下red跟blue谁先谁后都没有关系。

看下一个例子。

例二:

CSS

#box div{

color:red;

}

.important_false{

color:blue;

}

.important_true{

color:blue !important;

}

HTML

这一行末使用important 这一行使用了important

例二中,CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,不同的是,第二行末使用important,而第三行使用了!

默认情况下,class的优先级小于id,所以,第二行中即使用class重定义了自身样式,也无法生效,所以继承父级属性,这行字还是红色!

但是,第三行中,用了important提升优先级(或看成强制重定义),所以这里的css得以生效,这行字变为了蓝色!

2、

只有当同时出现两个同名的样式时,才可以这样用,就像下面这样的.

.myclass{

margin-left:20px!important;

margin-left:40px;

}

3、 后来我看到了!important这个属性,这个属性其实也是css规范中的,结果IE6愣是不支持,也正因为它不支持,才让很多的CSSer们找到了解决的方法。一般来讲,在css中,如果在同一个css块中写下两个同样的属性,那么其实是按照最下面的来执行的,比如说:

.home{

margin-left:20px;

margin-left:40px;

}

那么在执行的时候其实是按照40px来执行的,!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为:

.home{

margin-left:20px!important;

margin-left:40px;

}

那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行,而在IE6下却仍然按照40px来执行,因为IE6并不支持!important规范,我们就可以按照这个规则来满足IE6的设计需要,什么时候发现IE6和其他浏览器显示效果不同,那么就设置两个,在上面的一个加入!important标记,而下面的一句则不需要添加,这样IE6就按照下面的来执行了。资深的CSSer说:如今的CSS处处!important。这可都是天杀的IE6惹的祸,大家说IE6就是一坨代谢产物一点也不为过。

4、

说明!important对火狐和IE7,8的作用是相同的,而IE6而显出了特殊的结果

#test{background:("a.png") no-repeat!important;background:url(ie6.gif) no-repeat}

5、

!important 具有优先权

提升指定样式规则的应用优先权。

示例:div { color:red!important }

display:inline|block

display:inline比较经典的用法是用在

  • 下的
  • display:inline 对应不显示为 display:none

    display:block 对应不显示为 hidden

    说通俗点样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方

    display:inline

    它可以让行内显示为块的元素,变为行内显示,例如

    DIV1 DIV2

    这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了,DIV1和DIV2这时候显示在同一行了,试试看

    DIV1 >DIV2

    现在DIV1和DIV2就在一行里了。

    和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了

    [font style= "display:block "] SPAN1 [/font]

    [font style= "display:block "] SPAN2 [/font]

    block一般一个块占一行,除非float

    inline是自动排为一行,就象段内的文字一样,可成为多行。

    clear:both 语法:clear :none | left |right | both

    参数:

    none : 允许两边都可以有浮动对象

    both : 不允许有浮动对象

    left : 不允许左边有浮动对象

    right : 不允许右边有浮动对象

    说明:

    该属性的值指出了不允许有浮动对象的边。请参阅float属性。