html - 如何在 CSS 中定位 div 的特定元素？

Question

我有一些这样的代码：

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

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

Answer 1

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

#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 选择器。

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 标签。这些属性选择器由“开头”选择。

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

这些选择由“包含”。

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 */ }

您可以按图片 URL 选择：

 #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+。