Question

我会尝试尽可能地清楚，但我很困惑，所以如果我没有意义，我会提前道歉。

我有一个看起来像这样的面包屑菜单

<div class="move">
  <div class="group col-md-2" style="padding:0;">
    <ul class="nav nav-tabs header" style="margin-top:5em;">
        <li><a>Corporate</a> </li>
    </ul>
</div>
<div class="group col-md-2" style="padding:0;">
    <ul class="nav nav-tabs header" style="margin-top:5em;">
        <li class='active'><a>Corporate</a> </li>
    </ul>
</div>

<div class="group col-md-2" style="padding:0;">
    <ul class="nav nav-tabs header" style="margin-top:5em;">
        <li><a>Corporate</a> </li>
    </ul>
</div>

<div class="group col-md-2" style="padding:0;">
    <ul class="nav nav-tabs header" style="margin-top:5em;">
        <li><a>Corporate</a> </li>
    </ul>
</div>

在我的CSS中我有一个内容标签，在项目之间添加一个箭头，这样他们就知道可以选择下一个撕裂。但是，我删除最后一个孩子的内容有点困难，因此箭头不会出现。

我已经尝试了太阳下的所有东西，我可以想到删除这个标签，所以一些帮助将不胜感激。

添加我正在使用的内容

.move .nav-tabs > li:after{
  content:' > ';
 }

我试过了

 .move .nav-tabs > li:last-child:after{
   content:' ';
 }

 .move .nav-tabs > li:after:last-child{
   content:' ';
 }

.move .nav-tabs:last-child{
  content:' ';
 }

作为一个注释我不能修改html来添加一个类或更改它所以有更少的div。这就是我给予的工作。再次任何帮助将不胜感激！

JSFiddle http://jsfiddle.net/9Z77z/

Answer 1

使用

.move > :last-child > .nav-tabs > li:after {
    content:' ';
}

演示：http://jsfiddle.net/9Z77z/3/

<小时/> 与大多数CSS3选择器一样，beware IE8。

Answer 2

最简单的方法是在li标签上放置一个您不想显示箭头的ID，例如：

<div class="group col-md-2" style="padding:0;">
    <ul class="nav nav-tabs header" style="margin-top:5em;">
        <li id="noAfterContent"><a>Corporate</a> </li>
    </ul>
</div>

而不是css：

#noAfterContent:after{
 content:'';
}

div组内的最后一个孩子的内容

2 个答案: