Question

不幸的是，对我来说，nth-of-type选择器拒绝在简单场景中遵守订单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;
}

当我删除黄色背景周围的注释时，帮助部分将具有黄色背景，因此它明确同意具有背景设置。但是，下面给出的命令，要求第二个帮助部分有红色背景，但它只是拒绝服从我！是我的浏览器吗？ Firefox v24.0？或者我不知道nth-of-type的作用是什么？

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

Answer 1

我认为问题在于您必须指定要从中计算与您的选择器匹配的子项的父项。所以你必须改变你的css类似于：

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

并添加

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

围绕你的助手部分。我尝试使用身体选择器，但没有运气。

此处有更多信息：http://reference.sitepoint.com/css/pseudoclass-nthoftype

<强>的jsfiddle

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

Answer 2

另一种选择是仅为这些部分使用不同的元素

fiddle

HTML

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

CSS

section:nth-of-type(2) {
    background-color: red;
}

CSS nth-of-type拒绝服从

2 个答案:

HTML

CSS