css !important用法CSS样式使用优先级判断

今天药忘吃喽~ 2021-06-24 13:59 540阅读 0赞

例一：

CSS

\#box \{  
     color:red !important;  
     color:blue;  
 \}

HTML

<div id="Box"> 在不同的浏览器下，这行字的色应该不同！</div>

这个例子应该是大家经常见到的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

<div id="Box">  
    <div class="important\_false">这一行末使用important</div>  
    <div class="important\_true">这一行使用了important</div>  
</div>

例二中，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比较经典的用法是用在 <ul> 下的 <li> 中   
  
　　display:inline 对应不显示为 display:none   
  
　　display:block 对应不显示为 hidden   
  
　　说通俗点样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方   
  
　　display:inline   
  
　　它可以让行内显示为块的元素，变为行内显示，例如   
  
　　<div class="d1">   
  
　　<div>DIV1</div>   
  
　　<div>DIV2</div>   
  
　　</div>   
  
　　这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了,DIV1和DIV2这时候显示在同一行了，试试看   
  
　　<div class="d1">   
  
　　<div style="display:inline">DIV1</div>   
  
　　<div style="display:inline">>DIV2</div>   
  
　　</div>   
  
　　现在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属性。