如何在不向最后一个列表项添加任何类的情况下使用CSS 删除<ul>无序列表的最后一个<li>列表项的边框？
在这里查看实例: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>Joh*_*n K 38
添加此样式,您无需修改任何其他内容:
#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>
Kev*_*vin 10
我一直这样做,没有CSS3或JavaScript.您需要做的就是浮动您li并使用高级选择器+:
<style>
ul li {
float: left;
border: none; }
li + li {
border-left: 1px solid #F00; }
</style>
这将保持第li一个边界.