一 css的优先级
一 css的优先级
今天有人跟我说css
hack中用!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使该样式优先级最高,例如:
CSS代码:
#idA{font-size:20px}
.classA{ font-size: 12px; }
HTML代码:
我要20像素的字
我们知道根据上面的规则可以看出#idA{font-size:20px}的样式将被引用,那我们如果要12像素的字呢?
CSS代码:
#idA{font-size:20px}
.classA{ font-size: 12px !important; }
HTML代码:
我要12像素的字
这样.classA{ font-size: 12px !important; }这个样式就被引用了。
这种方法在优先级低的样式被优先级高的样式覆盖,又想引用优先级低的样式时候非常有用!
二 !important在ie6下的一个BUG
还是看这一段代码,
CSS代码:
#idA{font-size:20px}
.classA{ font-size: 12px !important; }
HTML代码:
我要12像素的字
大家可以在IE6下测试一下,文字是12像素的,也就是.classA{ font-size: 12px !important;
}被引用了,这证明IE6是支持!important的。但是css
hack中用!important来区分ie6,说ie6不支持!important又是怎么回事呢?
原来ie6下,在同一个选择器样式(即同一个大括号里面)下!important是无效的
,例如:
css代码:
.classA{ font-size:
相关文档:
#weblmenu
{
height:22px;
width:700px;
float:left;
display:inline;
text-align:left;
}
#weblmenu ul
{
height:22px;
width:700px;
text-align:left;
float:left;
}
#weblmenu ul li
{
height:22px;
width:110px;
float:left;
list-style-type:none;
text-align:center;
word-break:break-all;
} ......
语法:
border-width : medium | thin | thick | length
参数:
medium : 默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位
说明:
如果提供全部四个参数值,将按上-右-下-左的顺 ......
<div class="llist" >
<div class="lbar">定向营销</div>
<ul class="lbox01" style="height: auto;min-height: 100px;">
<c:forEach var="item" items="${marketInfos.results}">
<li><div style="overflow:hidden; text-overfl ......
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
ScrollBar
{
/*划动块图片皮肤*/
thumbDownSkin: Embed(source="scrollBar/thumb. ......
如果IE6和IE7显示都正常;火狐也没有问题;检查代码也没有误失;就试试加上这段代码
IE8目前还不稳定,腾讯首页利用IE7的内核来渲染IE8,代码如下:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ......