CSS：最后一个子元素

quo_et 发布于 2018-10-12 • 在 css • 最后更新 2018-10-12 20:12 • 170 浏览

我有一个div#content，里面有很多div.item。当使用:last-child来创建没有border-bottom的最后一个div.item时，它没问题。但是，因为内容是使用php和mysql结果动态追加的，所以我使用了一个条件分页表，它将在最后一个div.item后面添加，这意味着div#content的底部。这将是问题，因为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

3 个回复

isit 2018-10-12

赞同来自:

你可以使用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可能仍然没有边框底部。所以重置所有边框然后激活脚本以删除最后一个边框。

ncum 2018-10-12

赞同来自:

似乎附加项目不会使布局引擎重新运行一些CSS规则，如：last-child。我认为您可以重新读取/重新加载CSS文件，使规则适用。不知道，这是猜测。另一种可能性是动态设定风格。

编辑：似乎你有一个CSS x浏览器问题。看看这个：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors

tiste 2018-10-12

赞同来自:

我能想到的一种可能性是你附加的元素不是<div>s和/或没有item类。检查PHP / MySQL脚本的输出，看看是否有任何非div.item元素(在DOM术语中)div.item元素。这些元素与选择器不匹配：

div#content div.item:last-child

该选择器仅查找带有item类的<div>，这是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>

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

选择的结果，此<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
```

CSS：最后一个子元素

3 个回复

热门问题

热门话题

CSS：最后一个子元素

与内容相关的链接

3 个回复

热门问题

热门话题