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

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

web前端端

2015-12-17

源自：十天精通CSS3 5-5

关注问题我要回答

3525

操作

收起

10 回答

狂飙的蜗牛_1 回答被采纳 +3 积分
2015-12-17

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

0 回复有任何疑惑可以回复我~

收起回答

web前端端提问者

你可以跟我说下怎么考虑麽

2015-12-18 回复有任何疑惑可以回复我~

web前端端提问者

非常感谢！

2015-12-18 回复有任何疑惑可以回复我~

Anney_fish
2017-12-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 回复有任何疑惑可以回复我~

收起回答

狂飙的蜗牛_1
2015-12-17

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

0 回复有任何疑惑可以回复我~

收起回答

web前端端提问者

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

2015-12-18 回复有任何疑惑可以回复我~

web前端端提问者
2015-12-17

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

0 回复有任何疑惑可以回复我~

收起回答

狂飙的蜗牛_1
2015-12-17

//算了，直接给你代码吧
<!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>

0 回复有任何疑惑可以回复我~

收起回答

web前端端提问者

还是第一项有分割线，你说会不会是我浏览器的问题？？

2015-12-17 回复有任何疑惑可以回复我~

web前端端提问者

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

2015-12-17 回复有任何疑惑可以回复我~

web前端端提问者
2015-12-17

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

0 回复有任何疑惑可以回复我~

收起回答

web前端端提问者
2015-12-17

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

0 回复有任何疑惑可以回复我~

收起回答

web前端端提问者

这极像是人家写错的代码，但为嘛显示出来的就第一项分割线不见了？

2015-12-17 回复有任何疑惑可以回复我~

狂飙的蜗牛_1

first-child，你中间少写了个横杠

2015-12-17 回复有任何疑惑可以回复我~

web前端端提问者回复狂飙的蜗牛_1

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

2015-12-17 回复有任何疑惑可以回复我~

狂飙的蜗牛_1
2015-12-17

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

0 回复有任何疑惑可以回复我~

收起回答

狂飙的蜗牛_1
2015-12-17

这三个地方

0 回复有任何疑惑可以回复我~

收起回答

web前端端提问者

你说一下你那里看出来的是第一项分割线被去掉了没有？？？我这边加了花括号还是原来的样子》》》》我代码里面没有写first-child跟last-child，你是说我贴上去的代码中的first child 跟last child都去掉的意思？我看到一个同学写的代码，第一项分割线被去掉了，但他的代码内容是这样子的

2015-12-17 回复有任何疑惑可以回复我~

狂飙的蜗牛_1 回复 web前端端提问者

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

2015-12-17 回复有任何疑惑可以回复我~

狂飙的蜗牛_1
2015-12-17

//后面少了花括号   }
	.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);

0 回复有任何疑惑可以回复我~

收起回答

web前端端提问者

.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

2015-12-17 回复有任何疑惑可以回复我~

web前端端提问者回复 web前端端提问者

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

2015-12-17 回复有任何疑惑可以回复我~

0/150

提交

取消

十天精通CSS3

参与学习 242555 人
解答问题 2623 个

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

进入课程

本课相似问答

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

1 回答制作导航分割线

1 回答制作导航条分割线

2 回答请问一下删除导航分割线

1 回答不知道怎样做出导航分割线

搜索更多本课相关问答

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

我要回答关注问题

热搜

最近搜索清空

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

10 回答

本课相似问答

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