Question

我正在使用nth-of-type遇到问题。我有一个Codepen演示了这个问题。

https://codepen.io/nicole-staline/pen/bJMMjd

我假设由于.input_range.marker是第一种类型，因此以下方法应该起作用：

.marker {
      &:nth-of-type(1) {
      background:red;
}

但不是，我必须使用nth-of-type（4）来定位它。这对我来说毫无意义。

我可以合理地假设它正在计算其他范围输入，但是不应该这样，除非我误解了第n个类型的工作原理。

讨厌重新发布，但是上一个问题立即被重复了，并把我链接到没有解决我问题的文章。

Answer 1

:nth-of-type()按类型而不是类别选择元素。因此，即使在类上使用它，它最终也会解析为类型及其同级元素，在这种情况下为input。

Answer 2

这是预期的行为，nth-of-type会考虑被其调用的父级下的所有同级，这意味着根据您的代码，将考虑input下的所有input_range。

如果要使用CSS解决方案，则可能必须采用包装div并将类的作用域设置为：

<div class="input_range">
    <input class="range" type="text" value="1"/>
    <input class="range" type="text" value="2"/>
    <input class="range" type="text" value="3"/>

  <div class="subset">
    <input class="marker" type="text" value="4"/>
    <input class="marker" type="text" value="5"/>
  </div>

</div>

通过以下方式定位目标

：

.input_range {
  .range {

  }
  .marker {

  }

  .subset .marker{
    &:nth-of-type(1) {
      background: black;
    }
  }
}

否则，您始终可以使用javascript：

document.getElementsByClassName(‘marker’)[1].style.background = ‘black’;

第N个类型未检索期望的元素

2 个答案: