img:first-of-type选择所有图像

时间:2013-04-06 19:48:40

标签: html5 css3 modernizr

我的页面中有两张图片。我希望第一个显示在用户使用触摸设备访问网站或不支持Javascript时,使用Modernizr进行定位。

页面顶部的菜单按钮:

<img src="menubutton.png" alt="Menubutton">

另一张图片,它只是文章中使用的图片:

<img src="image.jpg" alt="Image">

在我的CSS中,我有这个:

.no-touch img:first-of-type, .no-js img:first-of-type {
    display:none;
}

现在,这几乎可以正常工作:我的笔记本电脑上没有显示图像,但显示在我的iPad上。但是,我的笔记本电脑上也没有显示第二张图片。但是,第二张图片正在我的iPad上显示。另外,如果我使用ID来定位第一个图像,它会按照我想要的方式工作,但除非真的需要,否则我不能使用ID。这里发生了什么?

1 个答案:

答案 0 :(得分:1)

第一个类型的选择器具有非常有限的支持。它也将是其父元素中的第一个类型,而不是整个文档中,这可能是问题。