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

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>

---

在本例中：我不太明白为什么类型（1）的第n个

不选择任何内容，而类型（2）的第n个
选择了我要选择的第一个内容。有人知道为什么会发生这种情况吗？
那是因为它是类型的第n个，而不是类的第n个

HTML中的第一个
div
没有
small
类，因此没有与
.small
和
nth类型（1）
匹配的元素，这是因为它是
nth类型
，而不是
nth类型

HTML中的第一个
div
没有
small
类，因此没有元素同时匹配
.small
和
nth类型（1）
伪选择器
：nth-of-type（）
选择标记的类型

在您的示例中，它是一个
div
。当您在类（
.small:nth类型（1）
）上设置选择器时，仅当第一个div具有不属于这种情况的类时，才会应用css。
伪选择器
：nth-of-type（）
选择标记的类型

在您的示例中，它是一个
div
。当您在类（
.small:nth类型（1）
）上设置选择器时，仅当第一个div具有该类时才应用css，但实际情况并非如此。
请尝试以下操作：

HTML

这是一个更好的语义。
试试这个：

HTML

这是一个更好的语义。
这是因为第一行和第一个“asdafs”的类型相同。
n个类型
作用于元素，而不是类。这是因为第一行和第一个“asdafs”的类型相同。
n个类型
作用于元素，而不是类。不，现在CSS中没有比第n个类更好的了。谢谢！CSS的这一行基本上被解释为：“1.找到选择器的元素类型2.在整个页面中搜索具有该类型的所有元素3.选择所有第n个元素4.只选择满足选择器的元素”否，CSS中现在没有类似于第n个类的
nth
，谢谢！CSS的这一行基本上被解释为：“1.找到选择器的元素类型2.在整个页面中搜索具有该类型的所有元素3.选择所有第n个元素4.只选择满足选择器的元素”
.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;
}

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

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

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