Question

我有div一些其他div个，一些段落和一些图片。它基本上是这样的：

<div id="parent">
    <div>
        This image is inside a div.
        <img src="http://www.placehold.it/100" alt="" />
    </div>
    <p>
        And this inside a paragraph.
        <img src="http://www.placehold.it/100" alt="" />
    </p>
    <img src="http://www.placehold.it/100" alt="" />
    <img src="http://www.placehold.it/100" alt="" />
</div>

现在我只想选择未嵌套在另一个div或p内的图像。我正在使用子组合选择器执行此操作：

#parent > img {
    border: 1px solid red;
}

这样可行，但现在我只想选择第一个非嵌套图像。我试过这样，但没有任何结果：

#parent > img:first-child {
    border: 1px solid blue;
}

http://jsfiddle.net/vF2DU/

我该怎么办？有没有办法不添加像#first这样的类或ID？

Answer 1

您可以使用first-of-type或nth-of-type选择器。

在这种情况下，first-of-type可能更相关，但我会向您展示以下两种语法：

关于第一类：

“：first-of-type选择器匹配第一个元素特殊类型的孩子，其父母。“

第一个类型示例：

#parent > img:first-of-type {
    border: 1px solid blue;
}

对于您的使用案例，first-of-type为working jsFiddle。

关于nth-of-type：

“：nth-of-type（n）选择器匹配每个第n个元素其父母的特定类型的孩子。 n可以是数字，关键字或公式。“

nth-of-type示例：

#parent > img:nth-of-type(1) {
    border: 1px solid blue;
}

对于您的使用案例，nth-of-type为working jsFiddle。

<强>支持：

所有主流浏览器都支持这两种浏览器 - Chrome，Firefox，Opera和Internet Explorer（IE9及更高版本）。如果您有兴趣让它们在IE8中完美运行，请查看Selectivizr。

Answer 2

:first-child表示第一个孩子，而不是第一个遇到类型的元素。你需要的是:first-of-type选择器。 working example

CSS：儿童组合选择器＆amp; ：第一个孩子？

2 个答案: