我有一个div#内容,里面有很多div.item. 当使用:last-child来制作没有border-bottom的最后一个div.item时,没关系. 但是,由于内容是使用php和 mysq
... . . 我有一个div#内容,里面有很多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;}
你可以看到我正在定义最后一个孩子如此div.item
请给我任何建议.提前致谢.
!!!!!请注意,问题不在于内容是动态的,而是因为CSS:last-child不会将div.item识别为最后一个子节点,而是div#内容中的最后一个元素尽管告诉了它的CSS是:
div#content div.item:last-child.
解决方法
. 我能想到的一种可能性是,你附加的元素不是< div>和/或没有item类.检查PHP / MySQL脚本的输出,看看div.item元素旁边是否有任何非div.item元素(在DOM术语中).
这些元素与选择器不匹配:
div#content div.item:last-child
该选择器仅查找带有项类的< 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> element有item类,它是div #content的最后一个子节点.
它与上面的选择器完全匹配.
>未选中
这个< div> element有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> element是最后一个子节点,它没有item类.
它与上面的选择器不完全匹配;但是,它可能匹配这个:
/* Any div that happens to be the last child of its parent */div#content div:last-child. . .. ...