Question

我想使用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的情况下执行此操作。

Answer 1

：last-child伪类仍无法在浏览器中可靠地使用。特别是，Internet Explorer版本＆lt; 9，Safari＆lt; 3.2肯定不支持它，虽然Internet Explorer 7和Safari 3.2确实支持：第一个孩子，好奇。

最好的办法是明确地将最后一个子（或类似）类添加到该项目中，然后应用div.last-child。

或者你可以使用一些Javascript。

Answer 2

为了造型目的，添加额外的标记就像空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等伪类具有更强的支持。 :before伪类具有相当不错的支持（IE7不可用）。

Answer 3

如何重新思考设计，隐藏支持的:first-child伪...并清理div-itus？

.comment { border-top:1px solid red }
.comment:first-child { border:none; }

<div id="question_comments" class="comments_container">
  <div class="comment">
      <p>Comment1</p>
  </div>
  <div class="comment">
      <p>Comment2</p>
  </div>
</div>

我意识到你可能只是使用hr...作为dumby类，但我冒昧地将它用作<hr>元素（顺便说一句，btw优于<div>行为/作品相同）

http://jsfiddle.net/pVcrV/

* 编辑:(放回容器）*

<div id="question_comments" class="comments_container">
  <hr>
  <div class="comment">
      <p>Comment1</p>
  </div>
  <hr>
  <div class="comment">
  ...
</div>

http://jsfiddle.net/VJVxt/

我有点假设您从数据库中提取这些注释，并且使用服务器端语言即时吐出HTML。使用分隔符启动该转储（然后使用:first-child隐藏它）不是100％语义;然而，一个元素与一个JavaScript，或一个CSS黑客似乎不仅仅是一个公平的权衡。

Answer 4

#question_comments .hr-comment:last-child {display:none;}

Answer 5

这样做：

#question_comments > .hr-comment:last-child {
  display: none;
}

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

5 个答案: