dt.last-child不工作

Question

Here is a fiddle我想删除最后一个孩子的白色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）。我也发现：最后一个孩子有点尴尬。

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

您所做的不是添加底部边框，而是添加顶部边框 - 因此输出将为边框＆gt;内容＆gt;边界＆gt;含量

然后你使用：first-child从第一个元素中删除顶部边框，因此你留下了内容＆gt;边界＆gt;内容。

我复制了你的小提琴，并做了两处改动：

首先，用顶部边框替换底部边框：

#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

Amended JSFiddle

查看CSS Selectors specification了解更多详情。