让IE7/8使用CSS中first-child和last-child样式属性
2012-04-10 10:09
393 查看
项目最终效果如下图所示:
可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最后一个需要隐藏,否则效果不是很理想。
最原始的写法是:
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
这样当然不是最好的做法。但是我们有时需要转变思路,这样有时可以达到事半功倍的效果。
可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最后一个需要隐藏,否则效果不是很理想。
最原始的写法是:
#tabnavli:last-child
{
border-right:none;
}
在常用的浏览器中测试都通过了。但是IE7/8中,此样式不起作用。D右侧的边框还是会出现。我想了一下,那就给最后一个li加一个样式:
<liid="sub_nav_user"class="dcontentlastitem"><a>DContent</a></li>
lastitem是我们为最后一个li标签添加的类。然后给lastitem添加border-right:none。以为大功告成,但是忘了项目还与权限有关。管理员可以看到以上A,B,C,D四个选项。但是普通用户只能看到A和B2个选项。这下问题出来了,我不能直接给B的border-right设置为none。后来想了一个方法就是给C选项设置border-left:1pxsolid#6655cc。但是样式需重调,这样显得有点麻烦。既然last-child是针对最后一个元素进行样式设定的,那么我们可以通过jQuery达到同样的效果。也不需要给最后一个li添加lastitem的样式了。代码如下:
$("#tabnavli:last").addClass("lastitem");
样式如下:
#tabnav.lastitem
{
border-right:none;
}
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
这样当然不是最好的做法。但是我们有时需要转变思路,这样有时可以达到事半功倍的效果。
相关文章推荐
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- :last-child | CSS属性参考
- CSS选取第几个标签元素:nth-child、first-child、last-child
- 使用jquery修改css中带有!important的样式属性
- CSS选取第几个标签元素:nth-child、first-child、last-child
- css属性字体(font)样式使用详解
- 使用css属性:nth-child(n)匹配选择第n个子元素
- 如何使用JS来改变CSS样式 -- 元素的样式属性名称在CSS和JS中的对照表
- CSS:使用:first-letter设置首字样式
- 如何使用jquery修改css中带有!important的样式属性
- css使用overflow属性控制滚动条的样式
- :first-child :last-child IE5,IE6,IE7,IE8的css兼容性列表
- css:first-child、last-child、nth-child、 nth-last-child
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
- 使用 jQuery 修改 css 中带有 !important 的样式属性
- 如何使用jquery修改css中带有!important的样式属性
- CSS选取第几个标签元素:nth-child(n)、first-child、last-child
- [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)
- CSS中的第一个:first-letter 最后一个:last-child 第n个:nth-child 伪元素