例一:
这个例子应该是大家经常见到的 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 属性.
来源: http://www.bubuko.com/infodetail-2753916.html