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

个回答

狂飙的蜗牛_1

2015-12-17 23:42:05

已采纳

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

0

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;
}

你试试呢！

狂飙的蜗牛_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;
}

web前端端

2015-12-17 21:51:29

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

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>

web前端端

2015-12-17 21:37:48

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

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;

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

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

狂飙的蜗牛_1

2015-12-17 21:19:01

这三个地方

0

狂飙的蜗牛_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);