从最后一个span元素中删除:: after伪元素的内容

Question

我正在尝试从上一个::after元素中删除<span>伪元素的内容。我已经成功地与其他人一起做了，但我不确定为什么这个不能正常工作。

http://jsfiddle.net/L6d6w1ys/

HTML：

<section class="comments">
                <h3>Comments:</h3>
                    <div class="radius panel">
                        <div class="comment-meta">
                            <div class="row">
                                <div class="large-3 columns">
                                    <img src="http://placehold.it/250x150">
                                </div>
                                <div class="large-9 columns">
                                    <span>User 1</span>  <span>Date: 19/10/2014</span>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ullam veritatis cupiditate soluta qui, numquam laudantium fugit! Cum reiciendis sapiente doloremque molestiae laudantium quas aut, itaque rerum minus natus sed.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

CSS：

 .comments {
            p , span{
                font-size: 14px;
            }
            .comment-meta span{
                &:after{
                    content: " | ";
                    margin:0 15px;
                }
                &:last-child:after{
                    content: " ";
                    margin: 0;
                }
            }
        }

Answer 1

它不起作用，因为span:last-child选择器不会选择任何<span>元素。

假设标记，没有 <span>元素是其父级的最后一个孩子。

请尝试使用:last-of-type：

.comments {
  p , span{
        font-size: 14px;
    }
    .comment-meta span {
        &:after {
            content: " | ";
            margin:0 15px;
        }
        &:last-of-type:after {
            content: none;
            margin: 0;
        }
    }
}