<分区>
<分区>
我在使用 nth-of-type 时遇到了问题。我有一个代码笔来演示这个问题。
https://codepen.io/nicole-staline/pen/bJMMjd
我假设因为 .input_range.marker 是它的第一个类型，所以下面应该起作用:
.marker {
&:nth-of-type(1) {
background:red;
}
但它没有，我必须使用 nth-of-type(4) 来定位它。这对我来说没有任何意义。
我可以合理地假设它正在计算其他范围输入，但它不应该，除非我误解了 nth-of-type 的工作原理。
讨厌重新发布，但最后一个问题作为重复问题立即被关闭，并将我链接到一篇没有解决我的问题的文章。
最佳答案
这是预期的行为，nth-of-type 考虑它被调用的父级下的所有 sibling ，这意味着根据您的代码，所有 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’;
关于css - 第 N 个类型未检索到预期的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55764986/