3

我想使用 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​​ 的情况下做到这一点。

4

5 回答 5

4

:last-child 伪类仍然不能可靠地跨浏览器使用。特别是，Internet Explorer 版本 < 9 和 Safari < 3.2 肯定不支持它，尽管 Internet Explorer 7 和 Safari 3.2 确实支持 :first-child，奇怪的是。

您最好的选择是显式地向该项目添加一个 last-child （或类似）类，并改为应用 div.last-child 。

或者你可以使用一些Javascript。

于 2012-12-05T16:59:31.217 回答
3

通常不赞成为了样式目的而添加额外的标记，例如空 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 不可用）。

于 2012-12-05T17:57:44.300 回答
2

重新考虑设计，隐藏受支持的: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...用作一个愚蠢的类，但我冒昧地将它用作一个<hr>元素（顺便说一句，它比<div>行为/工作相同的 a 更好）

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 hack 似乎不仅仅是一个公平的权衡。

于 2012-12-05T17:11:31.867 回答
1 
#question_comments .hr-comment:last-child {display:none;}
于 2012-12-05T16:54:42.267 回答
0

做这个：

#question_comments > .hr-comment:last-child {
  display: none;
}
于 2012-12-05T17:01:00.143 回答