CSS:儿童组合选择器&:第一个孩子？

Question

我有div一些其他divs,一些段落和一些图像.它基本上看起来像这样:

<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？

Answer 1

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

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

关于第一类:

":第一个类型的选择器匹配其父元素的特定类型的第一个子元素."

第一个例子:

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

这里是一个工作的jsfiddle的first-of-type关于你的使用情况.

关于nth-of-type:

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

nth-of-type示例:

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

这里是一个工作的jsfiddle的nth-of-type关于你的使用情况.

支持:

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

Answer 2

:first-child表示first-child，不是首次遇到的类型元素。您需要的是:first-of-type选择器。工作实例