您现在的位置是:网站首页> 编程资料编程资料
CSS优先级和!important与IE6的BUG讨论及解决方案浅谈CSS 权值 层叠 重要性(!important)css中提升优先级属性!important的用法总结从可维护性角度考虑css的!important规则的可用性强制CSS !important使用介绍css中!important的作用(IE6 IE7 FF)及其原理CSS下!important属性 CSS中提升优先级属性!important的用法问题总结
2021-09-07
845人已围观
简介 本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢?到底ie6支不支持!important呢
一、css的优先级
今天有人跟我说csshack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢?到底ie6支不支持!important呢?
首先我们来看看!important这个属性的作用:!important是用来提升样式优先级的,我们知道样式是有优先级的。
我们先看看css的优先级的几个基本的规则:
ID选择器(形如#id{})>类选择器(形如.class{})>标签选择器(形如body{}或者*{}),也就是ID选择器,类选择器,标签选择器中,ID选择器的优先级最高,标签选择器最低;选择器越具体优先级就越高,也就是
.classA.classB.classC{font-size:25px;}
.classB.classC{font-size:18px}
.classC{font-size:12px;}
这里.classA.classB.classC的优先级最高,.classC的优先级最低;
•在同一个级别的情况下,最后指定的规则优先级就越高,也就是我们通常说的就近原则;
•html中标签的style的属性都高于css文件中的选择器样式;
•标有”!important”的规则有最高优先级。
我们可以利用!important使该样式优先级最高,例如:
#idA{font-size:20px}
.classA{font-size:12px;}
HTML代码:我要20像素的字
#idA{font-size:20px}
.classA{font-size:12px!important;}
HTML代码:我要12像素的字
这样.classA{font-size:12px!important;}这个样式就被引用了。
这种方法在优先级低的样式被优先级高的样式覆盖,又想引用优先级低的样式时候非常有用!
二、!important在ie6下的一个BUG
还是看这一段代码,
#idA{font-size:20px}
.classA{font-size:12px!important;}
HTML代码:我要12像素的字
大家可以在IE6下测试一下,文字是12像素的,也就是.classA{font-size:12px!important;}被引用了,这证明IE6是支持!important的。但是csshack中用!important来区分ie6,说ie6不支持!important又是怎么回事呢?
原来ie6下,在同一个选择器样式(即同一个大括号里面)下!important是无效的,例如:
.classA{font-size:68px!important;font-size:12px}
HTML代码:我要12像素的字
这里在ie6下是12像素的字,而其他浏览器下是68px的字,当然我们把样式改一下,!important放在后面,即
.classA{font-size:12px;font-size:68px!important;}
,那么ie6下和其他浏览器一样也是68px的字。也就是在同一个选择器样式(即同一个大括号里面)下!important被ie6彻底的无视了。
==============以下2009年8月1日更新==============
昨天在紫鼠的博客上也看到了关于!important的文章,说IE8在同一个选择器样式(即同一个大括号里面)下对!important的解析也是和IE6一样的,可是我测试的情况是IE8和IE6是不一样的,并留了言,今天我们讨论了这个问题,确实他写的他写的代码IE8和IE6对!important的解析是一样的。经过比较发现,他代码上没有DTD的声明,就是html代码上面的这一句:“”,神啊,在没有DTD的声明的情况下,在同一个选择器样式(即同一个大括号里面)下,IE6,IE7,IE8对!important的解析都是无效的。还有只要有声明文档类型的不管是html4,xhtml1.o,还有html5(“”),除去ie6有上面说的BUG外其他都是正常的。
今天有人跟我说csshack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢?到底ie6支不支持!important呢?
首先我们来看看!important这个属性的作用:!important是用来提升样式优先级的,我们知道样式是有优先级的。
我们先看看css的优先级的几个基本的规则:
ID选择器(形如#id{})>类选择器(形如.class{})>标签选择器(形如body{}或者*{}),也就是ID选择器,类选择器,标签选择器中,ID选择器的优先级最高,标签选择器最低;选择器越具体优先级就越高,也就是
复制代码
代码如下:.classA.classB.classC{font-size:25px;}
.classB.classC{font-size:18px}
.classC{font-size:12px;}
这里.classA.classB.classC的优先级最高,.classC的优先级最低;
•在同一个级别的情况下,最后指定的规则优先级就越高,也就是我们通常说的就近原则;
•html中标签的style的属性都高于css文件中的选择器样式;
•标有”!important”的规则有最高优先级。
我们可以利用!important使该样式优先级最高,例如:
复制代码
代码如下:#idA{font-size:20px}
.classA{font-size:12px;}
HTML代码:我要20像素的字
复制代码
代码如下:#idA{font-size:20px}
.classA{font-size:12px!important;}
HTML代码:我要12像素的字
这样.classA{font-size:12px!important;}这个样式就被引用了。
这种方法在优先级低的样式被优先级高的样式覆盖,又想引用优先级低的样式时候非常有用!
二、!important在ie6下的一个BUG
还是看这一段代码,
复制代码
代码如下:#idA{font-size:20px}
.classA{font-size:12px!important;}
HTML代码:我要12像素的字
大家可以在IE6下测试一下,文字是12像素的,也就是.classA{font-size:12px!important;}被引用了,这证明IE6是支持!important的。但是csshack中用!important来区分ie6,说ie6不支持!important又是怎么回事呢?
原来ie6下,在同一个选择器样式(即同一个大括号里面)下!important是无效的,例如:
复制代码
代码如下:.classA{font-size:68px!important;font-size:12px}
HTML代码:我要12像素的字
这里在ie6下是12像素的字,而其他浏览器下是68px的字,当然我们把样式改一下,!important放在后面,即
复制代码
代码如下:.classA{font-size:12px;font-size:68px!important;}
,那么ie6下和其他浏览器一样也是68px的字。也就是在同一个选择器样式(即同一个大括号里面)下!important被ie6彻底的无视了。
==============以下2009年8月1日更新==============
昨天在紫鼠的博客上也看到了关于!important的文章,说IE8在同一个选择器样式(即同一个大括号里面)下对!important的解析也是和IE6一样的,可是我测试的情况是IE8和IE6是不一样的,并留了言,今天我们讨论了这个问题,确实他写的他写的代码IE8和IE6对!important的解析是一样的。经过比较发现,他代码上没有DTD的声明,就是html代码上面的这一句:“”,神啊,在没有DTD的声明的情况下,在同一个选择器样式(即同一个大括号里面)下,IE6,IE7,IE8对!important的解析都是无效的。还有只要有声明文档类型的不管是html4,xhtml1.o,还有html5(“”),除去ie6有上面说的BUG外其他都是正常的。
相关内容
- IE6下CSS多类选择符优先级不起作用的bug分析及解决方法CSS选择器种类、优先级与匹配原理详解CSS控制样式的三种方式(优先级对比验证)CSS优先级的相关知识详细介绍网页css优先级为您详细解读css样式优先级及层叠的顺序排序探讨CSS层叠样式表之CSS解析机制的优先级及样式覆盖问题探讨CSS优先级和!important与IE6的BUG讨论及解决方案css样式的优先级究竟庞杂到什么程度css选择器优先级深入理解同级情况下CSS的优先级探讨
- 纯css3无js实现的Android Logo(有简单动画)css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 定义css设备类型-Media Queries图表简介及使用方法通过CSS3的object-fit来调整图片适配尺寸的技巧简介CSS计数器counter()的用法简介CSS中的伪元素简介简介CSS中的各种选择符Markdown.css样式简介CSS3 Columns分列式布局方法简介css3背景图片透明叠加属性cross-fade简介及用法实例
- IE7下父元素及子元素的隐藏顺序不当带来的display:none出现BUGIE/火狐/Chrome操作display:none对象所遇问题解答css元素隐藏原理及display:none和visibility:hiddenie9崩溃现象当js设置tr元素样式为display:nonedisplay:none和visibility:hidden的差别比较与演示代码如何通过 display:olck/none 完成一个菜单栏
- 元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)让图片 div居中实现代码CSS里的各种水平垂直居中基础写法心得总结css图片垂直居中 css中如何实现图片垂直居中css自适应宽度 多种方法实现宽度自适应的水平居中div图片垂直居中 如何使div中图片垂直居中css中margin:0 auto居中问题深入探讨div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)表单元素垂直居中完美解决方案三种方式实现元素水平居中显示与固定布局和流式布局概念理解元素及文本的水平居中/垂直居中/绝对居中总结
- CSS的样式合并与模块化提高代码执行效率Css 模块化编码技巧CSS 模块化 实现方法CSS模块化思想的优势通过宜家的家具设计方法学习CSS模块化CSS模块化的理解css模块化的思想让后期维护变得简单CSS 模块化的理解CSS模块化设计——从空格谈起-CSS教程-网页制作-网页教学网css模块化方案
- CSS样式分离之再分离达到精简与重用设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法
- 文件上传input file简便美化方案(css)css input[type=file] 样式美化(input上传文件样式 )基于jQuery+CSS3实现带动画效果文件上传插件特效源码HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)利用label标签和CSS美化文件上传表单(不兼容IE6)css 表单上传文件的“浏览”按钮修改使用css画一个文件上传图案
- css固定宽度并且让最后一行文字换行CSS控制文字换行、裁剪css控制文字自动换行的实现方法html、css 禁止文字自动换行属性word-breakdiv+CSS设置一行内文字超过宽度不换行且不显示截断文字加...css 解决英文字符与阿位伯数字自动换行 css是如何实现在页面文字不换行、自动换行、强制换行的方法
- 关于Chrome浏览器字体显示的太小不一的bug处理Win7下Chrome字体渲染颜色太淡颜色不够黑的解决方法解决中文版Chrome下网页不能显示小于12px字体Chrome的最小字体12px限制最终解决办法