html - dt.last-child 不工作

Question

这是一个小提琴，我想删除border:bottom最后一个孩子（“标题三”）上的白色。

我尝试了以下 CSS，但没有成功。

#containerr  dt.last-child {
border-bottom:none;
}

知道我做错了什么吗？

Answer 1

您真正要寻找的是:last-child- 但是这并没有以您期望的方式实现。:last-child意味着该元素必须是父元素中的最后一个子元素，即使后面的元素属于不同的类/类型。

你真正要找的是:last-of-type：

#containerr dl dt:last-of-type {
    border-bottom:none;
}

JSFiddle

唯一的问题是 V9 之前的 IE 不支持它。

Answer 2

这不会回答您的问题，但会提供解决此问题的方法。

我倾向于不使用:last-child（因为我曾经为旧版浏览器开发 - 以及一个旧版浏览器 - IE）。我还发现 :last-child 使用起来有点尴尬。

:first-child得到更广泛的支持（CSS 2），所以我更喜欢使用它。

您所做的不是添加底部边框，而是添加顶部边框 - 因此输出将是边框 > 内容 > 边框 > 内容

然后你使用 :first-child 从第一个元素中删除顶部边框，所以你剩下的是内容 > 边框 > 内容。

我已经复制了您的小提琴并进行了两项更改：

首先，用上边框替换下边框：

#containerr dt {
    [...]
    border-top:1px solid white;
}

其次，使用:first-child删除第一个 dt 的顶部边框：

#containerr  dt:first-child {
    border-top:none;
}

这是一个小提琴：http: //jsfiddle.net/ninty9notout/et7TW/

享受！

Answer 3

#containerr dt:nth-last-child(2){
    border-bottom:none;
}

试试看，对我来说效果很好。

Answer 4

伪选择器以冒号 ( :) 为前缀。.前缀表示一个类。同样，:last-child以集合中的最后一个元素为目标。在您的情况下，dd元素是最后一个子元素，因此您应该使用:last-of-type. 改变：

#containerr  dt.last-child

到：

#containerr  dt:last-of-type

修改了 JSFiddle。

查看CSS 选择器规范以获取更多详细信息。