CSS3: dopo l'override: last-child

Question

Ho il seguente CSS per lo stile un semplice elenco:

ul.menu_list li { 
display: inline; 
} 
ul.menu_list li:after { 
content:" | "; 
} 
ul.menu_list li:last-child { 
content:""; 
} 

<ul class="menu_list"> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
</ul> 

ottengo l'effetto desiderato tranne che per l'ultimo bambino non sta perdendo di essa la barra verticale, "|" .

Link | Link | Link | 

Ho provato la combinazione: dopo: last-child & viceversa, ma la prima: dopo la dichiarazione ha sempre la precedenza.

Answer 1

fare:

ul.menu_list li:after { 
    content:" | "; 
} 
ul.menu_list li:last-child:after { 
    content:""; 
} 

Answer 2

ul.menu_list li:last-child:after dovrebbe fare il trucco.

Here is a fiddle che mostra in azione ..

Answer 3

Prova a modificare:

ul.menu_list li:not(:last-child):after { 
    content:" | "; 
} 

Answer 4

ho trovato "li + li: prima di" lavori in IE8, Chrome, Firefox e Safari per Windows