為何只有最后一項導航分割線去掉了？
/*刪除第一項和最后一項導航分隔線*/ .nav li:first child::before{ ? ? width:0px; ? ? ? ? height:0px; } ? ? ? ?.nav li:last child::after{ ? ? ? ? ? ?width:0px; ? ? ? ? ? ?height:0px;} 這里怎么看出來的只有最后一項導航分割線被去掉了，第一項怎么去不掉？？？
舉報
0/150
提交
取消
2015-12-17
舉報
2015-12-17
不管你是新手還是大牛，任何時候都要考慮代碼的加載順序
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; }你試試呢！
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; }2015-12-17
你看這里，有人是這樣寫的，也將導航欄第一項跟最后一項分割線去掉了，像你說的，不寫后面的代碼，可我最先試的就是這個方法，寫成background-image:none;可根本達不到效果。。。
2015-12-17
//算了，直接給你代碼吧 <!doctype?html> <html> <head> ????<meta?charset="UTF-8"> <title>CSS制作立體導航</title> <link?rel="stylesheet"?> <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>2015-12-17
2015-12-17
.nav?li:first?child::after{ ???? ?width:0px; ?????????height:0px; } ????????.nav?li:last?child::after{ ????????????width:0px; ????????????height:0px;2015-12-17
.nav?li:last-child::after{ }//沒必要寫這個2015-12-17
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);