您可以使用:第一个子选择器来执行此操作.
您也可以使用:nth-child(1)(其中1 = =第一个孩子,2等于第二个孩子等)
最后一种更合适的方式是使用:first-of-type
例如:
div.image img:first-child {}
要么:
div.image img:nth-child(1) {}
或者(如果有其他元素,说出任何图像之前的< h1>:
div img:first-of-type
如果您有潜力拥有一个具有类图像的div,其中包含图像,还有另一个具有图像的div,如下所示:
HTML:
然后使用这些选择器:
例如:
div.image > img:first-child {}
要么:
div.image > img:nth-child(1) {}
要么:
div > img:first-of-type
注意:nth-child()和:first-of-type是CSS3选择器,它们在使用IE时具有一些有限的支持.有关浏览器支持的详细信息,请参阅Can I use CSS3 Selectors.
考虑一下像Selectivizr这样的标准化IE.