html - CSS nth-of-type 拒绝服从

Question

不幸的是，对我来说，第 n 个类型的选择器拒绝服从简单场景中的命令 shown here

这是用于测试的 HTML:

<div class="help-title">
    TITLE
</div>
<div class="help-warn-left">
    ERROR
</div>
<div class="help-warn-right">
    ERROR MESS
</div>

<div class="help-section">
    <div class="help-header">
        TEXT1
    </div>
    <div class="help-body">
        TEXT2
    </div>
</div>


<div class="help-section">
    <div class="help-header">
        TEXT3
    </div>
    <div class="help-body">
        TEXT4
    </div>
</div>


<div class="help-section">
    <div class="help-header">
        TEXT5
    </div>
    <div class="help-body">
        TEXT6
    </div>
</div>


<div class="help-section">
    <div class="help-header">
        TEXT7
    </div>
    <div class="help-body">
        TEXT8
    </div>
</div>

这是 CSS:

div.help-section{
    color:blue;
    /*background:yellow;*/
}

div.help-section:nth-of-type(2)
{
background:#ff0000;
}

当我删除黄色背景周围的评论时，帮助部分将具有黄色背景，因此它显然同意设置背景。但是，下面给出的命令，要求2nd help-section的背景是红色的，它根本不服从我!是我的浏览器吗？火狐 v24.0?还是我不知道 nth-of-type 的作用？

我希望它做的是选择第二个 div，其中包含在正文中找到的类帮助部分。显然，我在这里遗漏了一些东西。

Answer 1

我认为问题在于您必须指定要从中计算与您的选择器匹配的子项的父项。因此，您必须将您的 css 更改为类似于:

div.container div.help-section:nth-of-type(3)
{
    color:red;
}

并添加

<div class="container"></div>

围绕您的帮助部分。我尝试使用 body 选择器进行此操作，但没有成功。

更多信息在这里:http://reference.sitepoint.com/css/pseudoclass-nthoftype

JSFIDDLE

http://jsfiddle.net/HJm49/1/