1 
<div id="header"><!--start #header-->
    <img id="logo" height="80" src="../resources/CHUG-LOGO.png" />
    <ul>
        <a href="../home" title="Home"><li id="home"><h2>Home</h2></li></a>
        <a href="../about" title="About"><li id="about"><h2>About</h2></li></a>
        <a href="../store" title="Store"><li id="store"><h2>Store</h2></li></a>
        <a href="../contact" title="Contact"><li id="contact"><h2>Contact</h2></li></a>
    </ul>                    
</div><!--end #header-->

#header ul {
    padding: 0px;
    list-style-type: none;
    margin: 0px;
    float: right;
}
#header ul li {
    text-align: center;
    display: block;
    margin: 0px;
    float: left;
    padding-top: 45px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 65px;
    border-left: 1px solid #755b2c;
    border-right: 1px solid #b99e68;
}
#header ul li h2 {
    min-width: 105px;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    color: #000;
    font-size: 20px;
    font-weight: bold;
}

这是我的导航栏的代码，我正在尝试删除最后一个列表项的右边框。我知道我需要使用伪标识符：last-child，但我似乎无法让它工作。有任何想法吗？

4

2 回答 2

2

lis 在技术上不是元素的子元素ul，因为它们被a元素包裹。将 移动a到内部li并再次使用相同的代码。

于 2012-12-17T01:10:57.123 回答
0 
#header ul a:last-child li {
  border-right: none
}

但不要忘记最后一个：child 在 IE6、IE7 和 IE8 中不起作用：http: //quirksmode.org/css/contents.html

于 2012-12-17T01:23:24.530 回答