Question

我在一个div标签中使用了两个图像标签。我尝试用css给图像标签添加不同的样式，这样标签就没有任何类或id。但我没有结果。请更正我的CSS

我用过这样的css：

div img { padding-right: 2px; vertical-align: middle; }
div img img { width: 16px; height: 16px; }

<div>
<img src="..." alt="" />
<img src="..." alt="" />
</div>

Answer 1

像这样写你的CSS

div img:first-child {}
div img:last-child {}

如果div中有<img>个:nth-child(N)，请使用{{1}}

正如spliter所说，IE8不支持这种情况，在这种情况下使用邻近的选择器就像他在答案中所表明的那样。

Answer 2

第二行应该是

div img + img { width: 16px; height: 16px; }

所有当代浏览器都支持子选择器（+），而IE浏览器中的last-child仅支持IE9及以上版本。无论你如何处理这个问题，IE6都不在范围之内。

Answer 3

使用:first-child和:last-child选择器时，如果没有课程或ID，您可以尝试做什么。

div img img {}

以上标识<img>内的<img> <div>内的div img:first-child { padding-right: 2px; vertical-align: middle; } div img:last-child { width: 16px; height: 16px; }，而不是您拥有的内容。

{{1}}

Answer 4

你可以使用CSS3：nth-type-of选择器，比如bellow

div img:nth-of-type(1) {
    padding-right: 2px; vertical-align: middle;
}
div img:nth-of-type(2) {
    width: 16px; height: 16px;
}

但，这仅适用于支持CSS3（Chrome，Firefox，IE 9）的浏览器。要获得向后兼容性，您需要使用Javascript（循环遍历每个元素），或者向图像添加类

Answer 5

尝试这种方式：

div img.img1 { padding-right: 2px; vertical-align: middle; }
div img.img2 { width: 16px; height: 16px; }


<div>
<img src="..." alt="" class="img1" />
<img src="..." alt="" class="img2" />
</div>

具有任何类或ID的标签的Css

5 个答案: