0

JSFiddle 链接：http: //jsfiddle.net/sNeR7

文字下方的边框“对此我绝对确定；声称绝对确定是傻瓜的事业。” 不应该在那里，因为我已经添加了这个样式规则：

.bannerItem:last-of-type { border-bottom: none!important } 里面@media(max-width: 40em) { ... }。

知道为什么会这样吗？

4

2 回答 2

1

:last-of-type选择该特定类型的最后一个元素，而不是某个类的最后一个元素。所以实际上你的选择器.bannerItem:last-of-type不会选择任何东西。

div.bannerItem:last-of-type将选择最后一个div元素，而不是 class 的最后一个元素.bannerItem。

由于您的标记包含divafter .bannerItem，因此您的选择器将无法按预期工作。

假设可能有任何数量，.bannerItems我认为实际上没有办法用纯 css 选择器来做你想做的事情。

如果总是有三个，你可以使用：

.bannerItem:nth-child(3) {
    border-bottom: none!important
}

小提琴

于 2013-11-05T13:23:57.743 回答
1

使用时:last-of-type，它只搜索父级中某种类型（p、div等）的最后一个元素，而不是类或 ID 值。由于其中的所有子级.bannerHolder都是相同类型，因此:last-of-type正确使用最终会选择.bannerPager，因为它是其父级的最后一个子级 div。

如果你想在.bannerItem里面设置最后一个样式，.bannerHolder你可以使用：

.bannerHolder div.bannerItem:nth-child(3) {border-bottom: none;}

http://jsfiddle.net/sNeR7/3/

您还可以使用相邻的兄弟组合器来支持旧版本的 IE：

.bannerHolder .bannerItem + .bannerItem + .bannerItem {border-bottom: none;}

http://jsfiddle.net/sNeR7/2/

请注意，:nth-child()它也不搜索元素类，它只关心元素是否是其父元素的子元素。所以实际上不需要添加上面的类。

于 2013-11-05T13:24:26.167 回答