CSS第一个孩子不起作用

Question

I made this HTML:

<li><a href="#home">Home</a></li>
<li><a href="#curriculo">Currículo</a></li>
<li><a href="#trabalhos">Trabalhos</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#sobre">Sobre</a></li>

And this CSS:

.nav ul li:first-child {
    padding-left: 11.8%;
    border-left: none;
 }
.nav ul li a {
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px; 
    color: #6c6d6f;
    display: inline;
    border-left: 1px solid #3c948b;
    padding-left: 10%;
}

| Home | CV | Trab | Contact | Sobre

But I can't remove the first | from the first child. Can someone help me?

Answer 1

You are setting border-left: none on the first li but you are setting border-left:1px solid #3c948b on all the a elements. Pick one element type or the other.

Answer 2

replace

.nav ul li:first-child{padding-left: 11.8%; border-left:none;}

by

.nav ul li:first-child a{padding-left: 11.8%; border-left:none;}

FIDDLE