Question

我的div#content里面有很多div.item。使用:last-child制作最后div.item而没有border-bottom时，可以。但是，由于内容是使用php和mysql结果动态附加的，我使用的是条件分页表，它将在div.item的最后div#content之后附加。:last-child。这将是问题，因为CSS div.item将无法识别最后一个div#content div.item:last-child { border-bottom: none; }作为最后一个孩子。我的CSS看起来像：

div.item

正如您所看到的那样，我正在定义最后一个孩子ID div#content div.item:last-child

请提出任何建议。提前谢谢。

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

{{1}}

Answer 1

我能想到的一个可能性是你附加的元素不是<div>和/或没有item类。检查PHP / MySQL脚本的输出，看看div.item元素旁边是否有任何非div.item元素（在DOM术语中）。

此类元素与选择器不匹配：

div#content div.item:last-child

该选择器仅查找<div>个item类div#content，这是<div id="content"> <div class="item"></div>  </div>的最后一个孩子。

这是一个例子。

在追加

之前

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

追加

<div>

选择什么，什么不选，为什么？

<强>选择的
此item元素具有div#content类，它是<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的最后一个孩子。

它与上面的选择器不完全匹配;但是，它可能匹配这些选择器中的任何一个：
```
<div>
```
未选中
虽然此item元素是最后一个子元素，但它不具有/* Any div that happens to be the last child of its parent */ div#content div:last-child类。

它与上面的选择器不完全匹配;但是，它可能匹配这个：
```
{{1}}
```

Answer 2

似乎附加项目不会使布局引擎重新运行一些CSS规则，例如：last-child。

我认为您可以重新读取/重新加载CSS文件，使规则适用。不知道，这是猜测。

另一种可能性是动态设定风格。

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

检查出来：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors

Answer 3

你可以使用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');

在执行上述操作之前，您可能需要重置边框。即前一个'last'div可能仍然没有边框底部。所以重置所有边框然后激活脚本以删除最后一个边框。

CSS：最后一个孩子

3 个答案: