CSS3: po Zastępowanie: last-child

Question

Mam następujące CSS styl prostą listę:

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> 

uzyskać pożądany efekt wyjątkiem ostatniego-dziecko nie traci Jest to pionowy pasek, „|” .

Link | Link | Link | 

Próbowałem łączenia: po: last-child & odwrotnie ale pierwsze: po deklaracja zawsze ma pierwszeństwo.

Answer 1

uwagi:

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

Answer 2

ul.menu_list li:last-child:after powinno załatwić sprawę.

Here is a fiddle, który pokazuje jak to działa ..

Answer 3

Spróbuj to zamiast:

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

Answer 4

znalazłem "Li + li: przed" działa w IE8, Chrome, Firefox i Safari dla Windows