侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

CSS:最后一个孩子

2022-12-30 星期五 / 0 评论 / 0 点赞 / 53 阅读 / 2634 字

我有一个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
. . .. ...

广告 广告

评论区