css - 标签 SPAN 打开时，第 n 个子项不起作用

Question

这是我的代码

<span></span>
<div class='box'>title</div>
<style>div.box:nth-child(1) { color: red; }</style>

当我删除span标签或盒子上方的任何其他标签时它可以工作，但当我保持原样时它就不行了。为什么会这样？

Answer 1

Use :nth-of-type .

Basically :nth-child counts ALL the siblings. Regardless of type of element. However :nth-of-type takes into account the element selected.

Answer 2

Because the div is now the second child. Use :nth-of-type(n) instead.

 <style>
  div.box:nth-of-type(1) { color: red; }
 </style>

That will select the first div