如何删除< ul>无序列表的最后< li>使用CSS列出项目的边框,而不向上一个列表项添加任何类？
见这里的实例：http://jsbin.com/umose
body { background-color: #fff; font: 16px Helvetica,Arial; color: #000; }
li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;
border-right:1px solid green;
}
#navlist li:last-child { border-right: ; }
<p id="hello"></p> <ul id="navlist" > <li ><a href="#" id="current">Item one</a></li> <li id="active"><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul>
解决方法
添加此样式,您不需要修改任何其他内容：
#navlist li:last-child { border-right:0px; }
编辑：
原始脚本
答案适用的原始脚本发布在此处,因为jsbin.com可能删除3个月内未查看的内容.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>SandBox</title> <Meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body { background-color: #fff; font: 16px Helvetica,Arial; color: #000; } #navlist li { display: inline; list-style-type: none; padding:0 20px 0 20px;border-right:1px solid red; } /* !!!!!!!!!!!!!! PASTE ANSWER HERE TO MAKE THE FIX !!!!!!!!!!!!!!!! */ </style> </head> <body> <p>Hello from JS Bin</p> <p id="hello"></p> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </body> </html>
