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 {

Answer 2

您正在寻找的是：

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

Answer 3

a没有first-child。 li确实如此。

#banner nav ul > li 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;
}

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

3 个答案: