1

我有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/

我该怎么做？有没有办法不添加类或 id 之类的#first？

4

2 回答 2

7

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

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

关于第一类：

“ :first-of-type 选择器匹配每个元素，它是特定类型的第一个子元素，它的父元素。”

第一类示例：

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

这是一个关于您的用例的工作 jsFiddle 。first-of-type

关于第 n 个类型：

“:nth-of-type(n) 选择器匹配其父元素的特定类型的第 n 个子元素。n 可以是数字、关键字或公式。”

第 n 个类型的示例：

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

这是一个关于您的用例的工作 jsFiddle 。nth-of-type

支持：

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

于 2013-03-26T14:34:01.573 回答
5

:first-child表示first-child，不是第一个遇到的类型元素。你需要的是:first-of-type选择器。工作示例

于 2013-03-26T14:36:53.933 回答