CSS第一子选择器无法正常工作

Question

这是我的HTML:

<header id="banner" class="body">
    <h1><a href="#">New UGS Project! <br><strong>This is the sub-title</strong></a></h1>

    <nav><ul>
        <li><a href="#">home</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contact</a></li>
    </ul></nav>

</header><!-- /#banner -->

我的CSS:

#banner nav a:first-child:hover{
    -moz-border-radius-topleft: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px; 
    -webkit-border-bottom-left-radius: 8px;
}

我想只选择第一个链接"home"来应用边界半径.我正在努力使用这个CSS3选择器......

Answer 1

每个都a被包装成一个li元素,因此a它始终是其父元素的第一个(也是最后一个)子元素li.您必须选择li其父ul元素的第一个.一些示例选择器:

#banner nav li:first-child a:hover {
#banner nav li:first-child:hover a {
#banner nav li:first-child:hover {