從最後一個span元素的僞元素內容中移除::

Question

我試圖從最後一個<span>元素中刪除::after僞元素的內容。我已經設法與其他人做好了，但我不知道爲什麼這個工作不正常。

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; 
     } 
    } 
}