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,它只搜索父级中某种类型pdiv等)的最后一个元素,而不是类或 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 回答