Question

<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;
}

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

Answer 1

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

Answer 2

#header ul a:last-child li {
  border-right: none
}

但不要忘记最后：孩子在IE6，IE7和IE8中不起作用： http://quirksmode.org/css/contents.html

：Last-Child不使用Nav Bar？

2 个答案: