Question

嘿所有，我有这个代码：

    <div class="sidebox">

            <h3>Course Summary</h3>

            <div class="block">

                <h4>Course ID</h4> 
                <p>MS00000001</p>
                <h4>Start Date</h4> 
                <p>14<sup>th</sup> September 2011</p>
                <h4>End Date</h4> 
                <p>12<sup>th</sup> June 2012</p>
                <h4>Cost</h4> 
                <p>£1500.95</p>     

            </div>

        </div>

现在我试图改变每个第二个P标签的颜色

.sidebox .block p:nth-child(odd) {
    color: red !important;
}

我尝试使用它，但它没有工作：/什么都没有改变颜色，我在这里做错了什么？

Answer 1

正如Matt Ball所说，elements are 1-indexed而不是0索引。因此，您的p元素甚至是子元素，而不是奇数元素，因此它们根本不会匹配。另一个问题是:nth-child()会考虑该父级下的每个兄弟，无论其类型如何，因此如果您使用p:nth-child(even)，每个 p都会被选中。< / p>

使用p:nth-of-type(even)代替非p兄弟姐妹（在这种情况下，h4元素）从选择中排除：

.sidebox .block p:nth-of-type(even) {
    color: red !important;
}

Sample on jsFiddle

Answer 2

标记中没有p个元素，这是一个奇怪的子元素。 CSS nth-child是1索引的。

元素的第一个子元素的索引是1.

Source

CSS3 nth-child无法使用Chrome 9

2 个答案: