html - :Last-Child not working with Nav Bar?

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

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

Answer 1

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