：last-of-type选择器在媒体查询中不起作用

Question

JSFiddle Link：http://jsfiddle.net/sNeR7

文字下的边界＆＃34;我绝对肯定;声称绝对确定是一个愚蠢的企业。＆＃34;不应该在那里，因为我添加了这种风格规则：

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

知道为什么会这样吗？

Answer 1

:last-of-type选择特定类型的最后一个元素，而不是具有特定类的最后一个元素。实际上，您的选择器.bannerItem:last-of-type将不会选择任何内容。

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

由于您的标记在div之后包含.bannerItem，因此您的选择器将无法按预期运行。

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

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

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

Fiddle

Answer 2

使用: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()也不会搜索元素类，它只关心元素是否是其父元素的子元素。所以添加上面的类实际上并不是必需的。