让IE7/8使用CSS中first-child和last-child样式属性

项目最终效果如下图所示：

可以看出2个tab之间有一天分割线，这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最后一个需要隐藏，否则效果不是很理想。

最原始的写法是：

   1:  #tabnav li:last-child

   2:  {

   3:  border-right:none;

   4:  }

在常用的浏览器中测试都通过了。但是IE7/8中，此样式不起作用。D右侧的边框还是会出现。我想了一下，那就给最后一个li加一个样式：

<li id="sub_nav_user" class="dcontent lastitem" ><a >D Content</a></li>

lastitem是我们为最后一个li标签添加的类。然后给lastitem添加border-right:none。以为大功告成，但是忘了项目还与权限有关。管理员可以看到以上A，B，C，D四个选项。但是普通用户只能看到A和B2个选项。这下问题出来了，我不能直接给B的border-right设置为none。后来想了一个方法就是给C选项设置border-left:1px solid #6655cc。但是样式需重调，这样显得有点麻烦。既然last-child是针对最后一个元素进行样式设定的，那么我们可以通过jQuery达到同样的效果。也不需要给最后一个li添加lastitem的样式了。代码如下：

$("#tabnav li:last").addClass("lastitem");

样式如下:

#tabnav .lastitem

border-right:none;

这样当然不是最好的做法。但是我们有时需要转变思路，这样有时可以达到事半功倍的效果。

让IE7/8使用CSS中first-child和last-child样式属性相关推荐

CSS中常用的10个文本样式属性——让文本设置再无难点
一个页面中,文本样式,是必不可少的,当然css也给我们准备了很多很多很多的文本样式,以下列举了10个常用的文本样式属性及常用的属性值,掌握了,也基本满足使用了 1: text-transform 可以 ...
php 字体倾斜,CSS中font-style定义字体倾斜体样式的代码示例
本篇文章给大家带来的内容是关于CSS中font-style定义字体倾斜体样式的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.常用斜体语法常用字体样式设置font-st ...
css中设置br标签之后的样式_CSS学习
语法: 选择器,声明(由一个属性和一个值) 注释:/* */ 选择器: 1. id选择器,class选择器 2. 组和选择 3. 属性选择创建: 外部样式表 html <head> &l ...
css中清除li的点默认样式
如上样式,下面解决办法,在css中涉及下面函数样式如下
懂点前端——对CSS中的Padding、Border、Margin属性的理解
作为一个志在AIot(实际在写上位机程序.嵌入式代码)的工程师,怎么又关心起前端来了呢?怎么说呢,前端的应用范围广啊,从高大上的算法.富有科技感的物联网应用到无处不在的Web应用,只要是需要和终端用户 ...
css中设置首行文本缩进的属性是,css如何设置首行文字缩进？
在HTML网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法. css可以使用text-indent属性来 ...
css中appearance:none修改select option样式
https://www.xinran001.com/frontend/145.html select option有浏览器默认样式,且对自己的样式有一定的保护(基于css规则). 这个保护就是appe ...
CSS中常见的6种文本样式
前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...
html 设置最小宽度,总结css中最小宽度min-width和最大宽度max-width属性的使用方法...
CSS宽度属性为单词width,宽度width包含了两个重要的属性:最大宽度属性max-width和最小宽度属性min-width.最大宽度属性(max-width)用来定义宽度显示的最大值,当拖动浏 ...

让IE7/8使用CSS中first-child和last-child样式属性

让IE7/8使用CSS中first-child和last-child样式属性相关推荐

最新文章

热门文章