CSS：最后一个孩子

Question

我有一个div#content，里面有很多div.item。 当使用:last-child来创建最后的div.item而没有border-bottom时，这没关系。 但是，作为内容使用我使用的将在最后一个div.item这意味着在div#content的底部之后附加有条件的分页表PHP和MySQL结果动态地追加。这将是问题，因为CSS :last-child不会识别最后一个孩子的最后一个div.item。 我的CSS是这样的：

div#content div.item:last-child { 
    border-bottom: none; 
} 

，你可以看到我定义的最后一个子ID这样的div.item

任何建议，请。提前致谢。

!!!!!请注意，问题并不在于内容是动态的，而是因为CSS：last-child无法识别div.item作为最后一个子元素，但是div＃内容中的最后一个元素尽管告诉了它是这样的CSS：

div#content div.item:last-child 

Answer 1

一个可能性我能想到的是，你要追加不在<div> S和/或不具备item类元素。检查PHP/MySQL脚本的输出，看看除了（DOM术语）div.item元素之外是否还有任何非div.item元素。

这些元素不会选择匹配：

div#content div.item:last-child 

即选择只发现<div> s的item类，那是div#content最后一个孩子。

下面是一个例子。

附加

<div id="content"> 
    <div class="item"></div> <!-- [1] Selected --> 
</div> 

附加

<div id="content"> 
    <div class="item"></div> <!-- [2] Not selected --> 
    <div></div>    <!-- [3] Not selected --> 
</div> 

什么选择的，哪些不是，并为什么之后之前？

1. 选择
   这<div>元素具有item类，并且它是div#content最后一个孩子。

   它完全符合上述选择器。

2. 未选择
   这<div>元素具有item类，但不的的div#content最后一个孩子。

   它不完全匹配上面的选择器;但是，它可能匹配这些选择的任何一个：

   /* Any div.item inside div#content */ 
   div#content div.item 
   
   /* The last div.item child of its parent only */ 
   div#content div.item:last-of-type 
   

3. 未选择
   虽然这<div>元素是最后一个孩子，它不有item类。

   它不完全匹配上面的选择器;但是，它可能匹配这样的：

   /* Any div that happens to be the last child of its parent */ 
   div#content div:last-child 
   

Answer 2

你可以使用JavaScript刷新CSS只。看到这里：http://paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/

另一种方法是使用类似jQuery的库，并在每次添加新div时触发这一行脚本。 （也许你正在使用其他JS库，就像你说的，你是动态添加的div页面）

$('div#content div.item:last-child').css('borderBottom','none'); 

你可能需要你做上面虽然之前重置边界。即前面的'最后'div仍然没有边界底部。因此重置所有边框然后触发脚本以删除最后一个边框。

Answer 3

它似乎追加项目dinamically不会使布局引擎重新运行像一些CSS规则：最后一个孩子。

我想你可以重新读取/重新加载CSS文件，使规则适用。不知道，这是一个猜测。

另一种可能性是dinamically设置样式。

---

编辑：看来你有一个CSS浏览器的问题。

检查了这一点：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors