CSS:最后一个孩子

Question

我内心div#content很多div.item.当用no :last-child来制作最后一个div.item时border-bottom,没关系.但是,因为内容是使用php和mysql结果动态附加的,所以我使用了一个条件分页表,它将在最后一个后面附加,div.item这意味着在底部div#content.这将是问题,因为CSS :last-child不会将最后一个识别为最后div.item一个孩子.我的CSS看起来像:

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

你可以看到我正在定义最后一个孩子是这样的 div.item

请给我任何建议.提前致谢.

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

div#content div.item:last-child

Answer 1

我能想到的一个可能性是你附加了非<div>s和/或没有item类的元素.检查PHP/MySQL脚本的输出,看看div.item元素旁边是否有任何非元素(以DOM术语表示)div.item.

这些元素与选择器不匹配:

div#content div.item:last-child

该选择器只找到<div>带有item类的s ,它是最后一个子类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