Блог

Вот мой 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…

Каждый 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 {
  

То, что вы ищете, это:

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

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