Question

关于CSS+DIV导航条的写法的问题

看到一个CSS+DIV导航条，其中有一句代码不起作用，
ul.nav.last a {
border-bottom: 0px;
}
这句的意思应该是最后一个链接下面的边框为0，但在浏览器里看却没有其作用呢？
边框仍然是双线。

CSS代码如下：
<style type="text/css">
ul.nav {
padding: 0em;
list-style-type: none;
width: 8em;
background-color: #8BD400;
border: 1px solid #486B02;
}
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 3% 50%;
padding: 0.3em 1em;
}
ul.nav.last a {
border-bottom: 0px;
}
</style>
*************************************
*************************************
HTML body部分的代码如下，
<ul class="nav">
<li><a href="#">Read emails</a></li>
<li><a href="#">Write chapter</a></li>
<li><a href="#">Go shopping</a></li>
<li><a href="#" >Cook dinner</a></li>
<li><a href="#">Watch Lost</a></li>
</ul>

Answer 1

好像是这么写的：ul.nav a:last-child { border:0;}只有火狐3.0以上支持这个，IE好像678都不支持。 (- -!但是我试验了一下，好像还是解决不了问题)
把最后一个改成ul.nav { border-bottom:0px;}，好像解决问题...不知道是不是合乎你的意思。

Answer 2

有这种写法吗：ul.nav.last a ？
你可以写一个.nav .last{border-bottom:0; }
然后在最后一个a标签里引入： <li><a href="#" class="last">Watch Lost</a></li> 就可以了。

Answer 3

ul.nav {
padding: 0px;
list-style: none;
width: 500px;
background: #8BD400;
border: 1px solid #486B02;
}

ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
background: url(bullet.gif) no-repeat 3% 50%;
padding: 0.3em 1em;
}

其实a可以写一个全局样式 这个样 就不会每次都要去设置它的下划线 颜色

Answer 4

这些是0的值后面不要跟单位：
padding:0;
border:0;

不要写成：

padding:0px;

其他地方写错没有不知道，你自己琢磨，知道上贴代码看着头晕。

Answer 5

ul.nav.last a {
border-bottom: 0px;
}
last 在这里不是最后一个a。

应该是.nav li .last{你想要的属性}