Nth-of-type忽略了类

Question

所以我有这个HTML

<div>
    <div class="item"></div>
    <div class="item inactive"></div>
    <div class="item inactive"></div>
<div>

这个css

 .item.inactive:nth-of-type(1) {
     do stuff for 1st inactive
 }
 .item.inactive:nth-of-type(2) {
     do stuff for 2nd inactive
 }

但它没有按预期工作。

相反，我看到了这种行为

 .item.inactive:nth-of-type(2) {
     stuff is happening for 1st inactive
 }

当我指定.inactive时，它只是忽略了吗？我怎样才能得到我想要的效果？

＆＃13;

＆＃13;

.item {
  color: red;
}

.item.inactive:nth-of-type(2) {
  color: green;
}

＆＃13;

<ul class='item-list'>
  <li class='item'>item 1</li>
  <li class='item inactive'>item 2</li>
  <li class='item inactive'>item 3</li>
<ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

nth-of-type适用于代码type而不适用class。当你写：

.item.inactive:nth-of-type(1) {
  color: red;
}

如果同时使用class item和inactive.first div都有类项且没有非活动状态，那么

会影响第一个div。

.item.inactive:nth-of-type(2) {
  color: blue;
}

如果同时具有类项和非活动，则会影响第二个div。第二个div具有类项并且处于非活动状态，因此被选中。

您可以使用此：

div:nth-child(2) {
  color: red;
}

div:nth-child(3) {
  color: blue;
}

div:nth-child(2) {
  color: red;
}

div:nth-child(3) {
  color: blue;
}

  <div class="item">This is 0</div>
  <div class="item inactive">This is 1</div>
  <div class="item inactive">This is 2</div>

Answer 2

nth-of-type： - 它在CSS Selectors Level 3规范中定义为“结构伪类”，这意味着它用于根据内容与父元素和兄弟元素的关系来设置内容的样式。

nth-of-type reference

试试这个CSS

 .inactive:nth-of-type(2) {
    color:blue;
 }
 .inactive:nth-of-type(3){
    color:red;
 }

希望这会有所帮助..