CSS3:Overriding之后:last-child

Question

我有以下CSS来设置一个简单的列表:

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>

我得到了理想的效果,除了最后一个孩子没有丢失它的垂直条,"|".

Link | Link | Link |

我尝试过组合:after:last-child&反之亦然,但第一次:声明后总是优先.

Answer 1

做:

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