如何使用CSS隐藏评论列表中的最后一个分隔符?

我想用css隐藏评论之间的最后一个分隔符.代码如下.

<div id="question_comments" class="comments_container">
  <div class="comment">
    <div class="comment_details">
      <div>
        <p>Comment1</p>
      </div>
    </div>
  </div>
  <div class="hr-comment"></div>
  <div class="comment">
    <div class="comment_details">
      <div>
        <p>Comment2</p>
      </div>
    </div>
  </div>
  <div class="hr-comment"></div>
  <div id="question_comment">
    <form> ... </form>
  </div>
  <div class="clear"></div>
</div>

我在rails视图中生成它:

<div id="question_comments" class="comments_container">
  <% @question.comments.order("created_at ASC").each do |comment| %>
    <%= render :partial => "questions/comment", :locals => { :comment => comment } %>
    <div class="hr-comment"></div>
  <% end %>
  <%= render :partial => 'new_comment', :locals => {:targit => @question, :answer => nil} %>
  <div class="clear"></div>
</div>

我试过了:

div.hr-comment {
  background:url(hr-background.gif) repeat-x;width:100%;height:2px;margin-top:7px;margin-bottom:7px;width:310px;
}

.hr-comment:last-child { 
    display: none 
}

目标是如何在不使用ruby的情况下实现这一目标.

最佳答案
通常不赞成添加额外的标记,如空div,纯粹是出于造型目的.

.comment + .comment:before {
    border-top:1px solid;
    max-width: 300px;
    margin: 0 auto;
    content: " ";
    display: block;
}

http://jsfiddle.net/pVcrV/1/

相邻选择器在旧版浏览器中的支持比伪类更强,例如:last-child(在IE8中不可用)或:last-of-type. :之前的psuedo类有相当不错的支持(不适用于IE7).

转载注明原文:如何使用CSS隐藏评论列表中的最后一个分隔符? - 代码日志