小欢博客

代码：

<div class="login" >
   <form action="./login.php">
      <i class="fa-solid fa-circle-user"></i>
      <input type="text" id="username" name="username" placeholder="请输入账号" required>
      <i class="fa-solid fa-lock "></i>
      <input type="password" id="password" name="password" placeholder="请输入密码" required>
      <input type="submit" value="登录">
      <a href="./register.php">没有账号？现在注册</a>
   </form>
</div>

.login i:nth-child(1){
    margin-left: 45px;
    margin-top: 5px;
}

.login i:nth-child(2){
    margin-left: 46px;
    margin-top: 5px;
}

这段代码的本意是为了修改两个i标签的外边距，但事实上，只有第一个i标签会被选中，第二段css代码并没有作用到第二个i标签上面。
查阅资料发现是我对这个选择器的理解有误，举例来说：
i:nth-child(1)，代表选择与i同级的第一个元素，而且该元素是i
因此，i:nth-child(2)实际上匹配不到任何标签，因为与i同级的第二个元素是input，而input并不是i，因此这个选择器是错误的。要使这段代码具有实际意义，那么应该修改成：

.login i:nth-child(3)

它代表匹配与i同级的第三个元素，而且这个元素应当为i，在上面的HTML中就是第二个i标签。

本文作者：小欢

本文链接：nth-child()选择器不生效 - https://www.xh-ws.com/archives/nth-child_not_working.html

版权声明：如无特别声明，本文即为原创文章，仅代表个人观点，版权归 小欢博客 所有，遵循知识共享署名-相同方式共享 4.0 国际许可协议。转载请注明出处！