Как удалить последнюю границу на панели навигации?

Question

У меня есть веб-сайт, навигация в настоящее время выглядит как

Главная | Новости | О компании |

Как удалить строку после «О нас»?

HTML

<nav> 
    <ul> 
     <li> 
      <a href="index.php">HOME</a> 
     </li> 
     <li> 
      <a href="news.php">NEWS</a> 
     </li> 
     <li> 
      <a href="aboutus.php">ABOUT US</a> 
     </li> 
    </ul> 
</nav> 

CSS

nav { 
    float:right; 
    clear:right; 
    width:40%; 
    margin:0; 
    margin-top:30px; 
    margin-right:8%; 
} 

nav ul { 
    margin: 0; 
    padding: 0; 
    font-family: Microsoft Yi Baiti; 
} 

nav ul li{ 
    list-style: none; 
} 

nav ul li a{ 
    text-decoration: none; 
    float: left; 
    display: block; 
    padding: 10px 30px; 
    color: black; 
    border-right: 1px solid #ccc; 
} 

nav ul li a:hover { 
    transition: all .2s ease-in; 
    color: rgb(204,204,204); 
} 


nav li.last { 
    border: none ; 
} 

Последняя строка в CSS Я попытался удалить границу, но, к сожалению, не работает. Может ли кто-нибудь помочь? Благодаря!

Answer 1

Используйте класс :last-child псевдо на вашем li и целевой теги якорь.

Как так:

nav ul li:last-child a{ 
    border-right: none; 
} 

Answer 2

У вас есть граница на теге a, а не на li. Также li не имеет класса last, поэтому используйте :last-child. Вы хотите предназначаться это так:

nav li:last-child a { 
    border: none; 
} 

Fiddle: http://jsfiddle.net/pqe9hc6y/