CSS中的第一个孩子问题[重复]答案

【问题标题】：first-child issue in CSS [duplicate]CSS中的第一个孩子问题[重复]
【发布时间】：2015-07-15 18:48:45
【问题描述】：

为什么我的第一段没有红色背景？

HTML：

    <div class="item">
        <h1><a href="http://localhost/test">Test</a></h1>
            <p>This is a new entry </p>
            <p>This is a new entry</p>
    </div>

CSS：

.item p:first-child {background:red}

演示： http://jsfiddle.net/tv90yrbz/

非常感谢您对此提供的任何帮助。

【问题讨论】：

因为<p> 不是第一个孩子:)
不使用 first-chid 使用 .item p:nth-child(2) {background:red}
@siva：虽然它可能适用于所提供的确切示例代码，但它并不总是有效，因为在某些情况下p 也不是第二个孩子。

标签： html css css-selectors

【解决方案1】：

因为它不是第一个孩子，所以h1 是。

你可以使用first-of-type:

.item p:first-of-type {background:red}

http://jsfiddle.net/tv90yrbz/2/

但不支持旧版浏览器：

http://caniuse.com/#search=first-of-type

【讨论】：

非常感谢。快速跟进，我如何让它只影响第一段而不影响页面上的所有其他段落？演示>jsfiddle.net/tv90yrbz/3
@michaelmcgurk：您可能必须在父容器上使用一些额外的类。或者，如果容器是页面中的第一个 div，那么您可以使用 div:first-of-type p:first-of-type。
太棒了，Harry - 非常感谢你和 Curt :-D