<分区>
标签 css
我很难找到一种干净且非 hacky 的方式来选择我的嵌套 intro-cntnr div。每个嵌套的 intro-cntnr 都有不同的转换延迟。我一直在寻找类似 nth-type-of 的东西，但它不起作用，因为它们是嵌套的。在 css 选择器方面我还能使用什么？
<div className="intro-cntnr">
<span className="intro-msg wht"></span>
<div className="intro-cntnr">
<span className="intro-msg big wht"></span>
<div className="intro-cntnr">
<span className="intro-msg gry">
<span className="neon"></span>
</span>
<div className="intro-cntnr">
<div className="intro-cntnr">
<span className="intro-msg gry"></span>
</div>
</div>
</div>
</div>
</div>
最佳答案
特异性是一个关键的解决方案。根据选择器路径中使用的内容，选择器越长，值就越高。 具体规则是:
您不需要进行计算，但请记住，指定越多意味着定位所需元素的机会就越大。 <强> more on Specificity
以下代码段显示了基于不同选择器的不同结果。
.intro-cntnr .intro-cntnr .intro-cntnr .intro-cntnr .intro-cntnr{
color: red;
}
.intro-cntnr .intro-cntnr .intro-cntnr{
color: yellow;
}
.intro-cntnr .intro-cntnr{
color: blue;
}
.intro-cntnr{
color: green;
}<div class="intro-cntnr">
<span class="intro-msg wht">Target value 10</span>
<div class="intro-cntnr">
<span class="intro-msg big wht">Target value 20</span>
<div class="intro-cntnr">
<span class="intro-msg gry">
<span class="neon">Target value 30</span>
</span>
<div class="intro-cntnr">
<div class="intro-cntnr">
<span class="intro-msg gry">Target value 40</span>
</div>
</div>
</div>
</div>
</div>另外选择使用什么样的选择器也会影响结果 Here is a reference to css selectors
根据之前的规则找到适合自己的，就会得到结果。或者简单地将 ID 添加到样式所需的元素 :')
关于css - 在选择嵌套的相同类元素时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59722742/