nth-child() pseudo class на <a> теги

Question

Я создал новый дизайн заголовка для своего сайта, и все, кроме одной проблемы, разрешены. По какой-то причине, когда я пытаюсь использовать nth-child(1) или first-child или last-child в классе navLink, он применяет правила ко всем ссылкам, а не выбранному элементу. Я отправлю код ниже с помощью jsfiddle, чтобы продемонстрировать свою точку зрения.

http://jsfiddle.net/rg7fe/

HTML

<ul id="nav"> 
    <li class="navItem"><a class="navLink" href="#">Test</a></li> 
</ul> 

CSS

#nav { 
    background: RGB(200, 230, 240); 
    border-bottom: 1px solid RGB(0, 0, 0); 
    height: 30px; 
    margin: 0 auto; 
    position: relative; 
    width: 980px; 
    z-index: 5; 
} 

.navItem { 
    display: block; 
    float: left; 
    position: relative; 
} 

.navLink:first-child { 
    border-left: 1px solid RGB(0, 0, 0); 
} 

.navLink { 
    border-bottom: 1px solid RGB(0, 0, 0); 
    border-right: 1px solid RGB(0, 0, 0); 
    display: inline-block; 
    height: 30px; 
    line-height: 30px; 
    padding: 0 15px; 
    white-space: nowrap; 
} 

.navItem:hover .navLink { 
    background: RGB(120, 200, 250); 
    color: RGB(255, 255, 255); 
} 

Answer 1

Вам нужно применить п-й ребенок <li> не <a> которые всегда первый, последний и номер один ребенка в <li>.

.navItem:first-child a{ 
    border-left: 1px solid RGB(0, 0, 0); 
} 

.navItem a{ 
    border-bottom: 1px solid RGB(0, 0, 0); 
    border-right: 1px solid RGB(0, 0, 0); 
    display: inline-block; 
    height: 30px; 
    line-height: 30px; 
    padding: 0 15px; 
    white-space: nowrap; 
} 

Answer 2

.navItem:first-child .navLink { 
    border-left: 1px solid RGB(0, 0, 0); 
} 

использовать его. Проблема с вашим методом заключается в том, что .navLink: first-child вычисляет первый ребенок относительно .navItems, которые являются всеми элементами. Надеюсь, вы поняли.