CSS3：覆盖后：last-child

Question

I have the following CSS to style a simple 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>

I get the desired effect except for the last-child is not losing it's vertical bar, " | ".

Link | Link | Link |

I've tried combining:after:last-child & vice-versa but the first:after declaration always takes precedence.

Answer 1

Do:

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

Answer 2

Try this instead:

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

Answer 3

I found "li+li:before" works in IE8, Chrome, FireFox and Safari for Windows

Answer 4

ul.menu_list li:last-child:after should do the trick.

Here is a fiddle that shows it in action..