html - 从最后一个 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;
        }
    }
}