Question

我有一些类似的代码：

<div id="foo">
 <img src="bar.png" align="right">
 <img src="cat.png" align="right"> 
</div>

现在我的问题是如何在使用上述代码时在CSS中定位特定图像？

Answer 1

完全取决于您要定位的图像。假设它是第一个（尽管实现两者都相似）image：

#foo img[src="bar.png"] {
    /* css */
}


#foo img[src^="bar.png"] {
    /* css */
}

#foo img:first-child {
    /* css */
}

#foo img:nth-of-type(1) {
    /* css */
}

参考文献：

CSS3 selectors。

Answer 2

您可以为图像添加类别

.foo img:nth-child(2) { css here }

或

.foo img:first-child { css here }
.foo img:last-child { css here }

Answer 3

我不知道为什么每个人都固定在#foo div上。你可以定位img标签，甚至不用担心div标签。这些属性选择器由＆＃34;选择，以＆＃34;。

开头

img[src^=bar] { css }
img[src^=cat] { css }

这些选择＆＃34;包含＆＃34;。

img[src*="bar"] { css }
img[src*="cat"] { css }

或者你可以选择确切的src。

img[src="bar.png"] { css }
img[src="cat.png"] { css }

如果你想同时定位它们，那么你可以使用div id。

#foo img { css }

对于其中一个图像，根本不需要担心#foo div。

Answer 4

div > img:first-child {/*the first image*/}
div > img:last-child {/*the last image*/}

应该这样做。

Answer 5

以下所有解决方案仅适用于最近的浏览器。

您可以按子位置选择：

 #foo img:first-child { /* for the bar */ }
 #foo img:nth-child(2) { /* for the cat */ }

您可以按子位置选择，仅计算图像：

 #foo img:first-of-type { /* for the bar */ }
 #foo img:nth-of-type(2) { /* for the cat */ }

您可以按图片网址选择：

 #foo img[src^=bar] { /* for the bar */ }
 #foo img[src^=cat] { /* for the cat */ }

Answer 6

#foo > IMG:first-child {/* first of two IMGs */}
#foo > IMG + IMG       {/* second one */}

适用于所有浏览器，包括IE7 +。

如何在CSS中定位div的特定<img/>元素？

6 个答案: