投稿
  1. 125jz首页
  2. 资源
  3. 网页特效

如何去除导航栏最后一个不需要的分隔线

江山如画 • • 网页特效 • 阅读 3361

如何去除导航栏最后一个不需要的分隔线

网页导航栏制作时，菜单项之间常用1像素细线做分隔，如上图。

给菜单栏菜单项添加分隔线代码如下：

/* 给菜单栏菜单项添加分隔线 */
.nav li {
border-right: 1px solid #666;
}

最后一个菜单项右边就不需要这个边框线了，如何处理呢？

去除最后一个菜单项右边的分隔线，代码

/* 移除分隔线 */
.nav li:last-child {
      border-right: none;
}

今天中国网页设计教给大家使用伪类 :not() 将样式只应用到你需要的元素上：

/* 使用:not()去除导航上不需要的边框*/
.nav li:not(:last-child) {
           border-right: 1px solid #666;
}

.nav li:not(:last-child) 的意图特别清晰，菜单项最后一个将不使用border-right: 1px solid #666; 样式。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2254.html

赞 (1)
江山如画的头像江山如画管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2018年7月25日 下午8:02
下一篇 2018年7月27日 上午10:18

99%的人还看了以下文章

发表回复

登录后才能评论