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＆amp;反之亦然，但第一个：声明后总是优先。

Answer 1

执行：

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

Answer 2

请改为尝试：

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

Answer 3

ul.menu_list li:last-child:after应该可以解决问题。

Here is a fiddle显示了它的实际效果..

Answer 4

我发现“li + li：之前”适用于IE8，Chrome，FireFox和Safari for Windows

CSS3：Overriding之后：last-child

4 个答案: