为何只有最后一项导航分割线去掉了？-慕课网

为何只有最后一项导航分割线去掉了？

来源：5-5 CSS3背景制作导航菜单综合练习题

web前端端

2015-12-17 19:49

/*删除第一项和最后一项导航分隔线*/ .nav li:first child::before{ width:0px; height:0px; } .nav li:last child::after{ width:0px; height:0px;} 这里怎么看出来的只有最后一项导航分割线被去掉了，第一项怎么去不掉？？？

写回答关注

10回答

狂飙的蜗牛_1

2015-12-17 23:42:05

已采纳

不管你是新手还是大牛，任何时候都要考虑代码的加载顺序

2 0

web前端端

非常感谢！

2015-12-18 08:50:21

共 2 条回复 >

Anney_fish: 2017-12-16 17:35:16

我试着看了一下：

您可能这块代码出了问题

 .nav li:first child::after{
         width:0px;
         height:0px;
  }
  .nav li:last child::after{
            width:0px;
            height:0px;
}

改成这样就好了

.nav li:first-child::before{
     width:0px;
height:0px;
        }
.nav li:last-child::after{
width:0px;
height:0px;
}

你试试呢！

0 0

狂飙的蜗牛_1: 2015-12-17 23:40:20

.nav li:before{
            content:"";
            color:#666;
            position:absolute;
            top:18px;
            height:20px;
            left:-1px;
            width:1px;
            background-image:linear-gradient(to bottom,#f65f57,#993333,#f65f57);
}

 //下面这段代码必须是在上面这段代码的后面，就现在这样的顺序，不能想你写的那样的顺序
.nav li:first-child::before{
      width:0px;
         height:0px;
}

1 0

web前端端

神我问题里面贴出代码的顺序就是你这样的，把后面那个after一块代码去掉，第一项分割线还是在，不明白

2015-12-18 08:49:17

共 1 条回复 >

web前端端

2015-12-17 21:51:29

你看这里，有人是这样写的，也将导航栏第一项跟最后一项分割线去掉了，像你说的，不写后面的代码，可我最先试的就是这个方法，写成background-image:none;可根本达不到效果。。。

0 0

狂飙的蜗牛_1: 2015-12-17 21:40:26

//算了，直接给你代码吧
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<title>CSS制作立体导航</title>
<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
<style>
body{
 background: #ebebeb;
}
.nav{
 width:560px;
 height: 50px;
 font:bold 0/50px Arial;
 text-align:center;
 margin:40px auto 0;
     background: #f65f57;
          background-radius:10px;
          box-shadow:0px 5px 0px #B0483F;
 /*制作圆*/

          /*制作导航立体风格*/
          
}
.nav a{
 display: inline-block;
 -webkit-transition: all 0.2s ease-in;
 -moz-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 -ms-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
.nav a:hover{
 -webkit-transform:rotate(10deg);
 -moz-transform:rotate(10deg);
 -o-transform:rotate(10deg);
 -ms-transform:rotate(10deg);
 transform:rotate(10deg);
}

.nav li{
 position:relative;
 display:inline-block;
 padding:0 16px;
 font-size: 13px;
 text-shadow:1px 2px 4px rgba(0,0,0,.5);
 list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/
.nav li:before{
            content:"";
            color:#666;
            position:absolute;
            top:18px;
            height:20px;
            left:-1px;
            width:1px;
            background-image:linear-gradient(to bottom,#f65f57,#993333,#f65f57);
}

        /*删除第一项和最后一项导航分隔线*/
.nav li:first-child::before{
      width:0px;
         height:0px;
}
.nav a,.nav a:hover{
 color:#fff;
 text-decoration: none;
}

</style>
</head>
<body>
<ul>
     <li><a href="">Home</a></li>
     <li><a href="">About Me</a></li>
     <li><a href="">Portfolio</a></li>
     <li><a href="">Blog</a></li>
     <li><a href="">Resources</a></li>
     <li><a href="">Contact Me</a></li>
</ul>
</body>
</html>

2 0

web前端端

你能最后跟我指一下还有可能是哪里出错了麽？？

2015-12-17 22:12:43

共 2 条回复 >

web前端端

2015-12-17 21:37:48

按照你说的把后面的代码去掉之后，显示是这样的，这跟之前的还是一模一样的，问题到底出在哪里了呢

0 0
web前端端

2015-12-17 21:28:40
```
	.nav li:first child::after{
    	 width:0px;
         height:0px;
		}
        .nav li:last child::after{
            width:0px;
            height:0px;
```
3 0

web前端端回复狂飙的蜗牛_...

我一开始的代码里面就没有中横线吧，中横线好像不是构成的因素。我是看到有个同学写的代码，都是after，奇怪怎么就对了，可当我把他的代码复制到我的编辑栏里面，又是不对，好想发火

2015-12-17 21:44:50

共 3 条回复 >

狂飙的蜗牛_1: 2015-12-17 21:22:22

.nav li:last-child::after{
}//没必要写这个

0 0

狂飙的蜗牛_1

2015-12-17 21:19:01

这三个地方

2 0

狂飙的蜗牛_... 回复web前端端

first-child，两个单词之间必须有横杠的，我说的没必要写只是last-child的样式，因为last-child后面本来就没有分割线

2015-12-17 21:32:52

共 2 条回复 >

狂飙的蜗牛_1: 2015-12-17 20:35:40

//后面少了花括号   }
	.nav li:before{
            content:"";
            color:#666;
            position:absolute;
            top:18px;
            height:20px;
            left:-1px;
            width:1px;
            background-image:linear-gradient(to bottom,#f65f57,#993333,#f65f57);

2 0

web前端端回复web前端端

我添加之后，还是一样的，只有最后一项分割线去掉

2015-12-17 21:08:33

共 2 条回复 >

十天精通CSS3

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

242554 学习 · 2623 问题

查看课程

相似问题

为什么最后一项导航分割线删除不了呢

回答 4