html - 第 n 个类型的行为不符合预期

Question

HTML

<div id="content">          
    <div id="ok" class="content-block warning"><div></div><span>&#10003 Everything is OK!</span> </div>         
    <div id="module_1" class="content-block small">asfdasdf</div>
    <div id="module_2" class="content-block small">asdfasdf</div>
    <div id="module_3" class="content-block small">asfasdf</div>
    <div id="module_4" class="content-block small">asdfasdf</div>
    <div id="module_5" class="content-block small">asfasdf</div>
    <div id="module_6" class="content-block small">asdfasdf</div>
    <div id="module_7" class="content-block big"></div> 
    <div id="module_8" class="content-block big"></div>     
</div>

CSS

.small:nth-of-type(1) {
    background-color: black;
    border-style: solid;
    border-width: 15px;
    border-color: black;
}

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

在这个例子中:http://jsfiddle.net/CNBsY/2/我不太明白为什么 nth-of-type(1) 没有选择任何东西而 nth-of-type(2) 选择了我想要的第一件事选择。有人知道为什么会这样吗？

Answer 1

那是因为它是nth-of-type，而不是nth-of-class。

HTML 中的第一个 div 没有 small 类，因此没有匹配 .small 和 nth- 的元素类型(1)。