这个HTML结构可以使用nth-child吗？

Question

我有simplified HTML structure这样：

<div id="container">
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
</div>

我的目标是能够使用.box-header CSS伪造选择器来定位nth-child div。但是，以下CSS：

#container .box-header:nth-child(3) { background-color: red; }

似乎不起作用。

可以nth-child与此HTML结构一起使用吗？

请参阅此jsFiddle以供参考：jsFiddle

Answer 1

您可以将nth-child与班级item一起使用，并为其box-header分配一种风格

试试这个：

#container .item:nth-child(3) .box-header{ background-color: red; }

DEMO

Answer 2

.item .box-header:first-child {
    background-color: red;
}

Answer 3

container .item：nth-​​child（n）＆gt; .box-header {background-color：red; }