javascript – ：nth-child(2)不起作用. ：n-child(1)和：nth-child(3)

2019-07-17 06:35:08 阅读：143 来源： 互联网

：nth-child(2)似乎在孩子1中选择了一些东西.

孩子1和孩子3正常工作.

它似乎不涉及标签的类型,因为几个相似但不同的问题.我没有看到问题.

var one = document.querySelector('div.rules :nth-child(1)');
var two = document.querySelector('div.rules :nth-child(2)');
var three = document.querySelector('div.rules :nth-child(3)');
one.classList.add('arule');
two.classList.add('brule');
three.classList.add('crule');

.arule {
  background-color: yellow;
}

.brule {
  background-color: red;
}

.crule {
  background-color: blue;
}

<div class="rules">
  <div>
    <label for="rule1">Rule1</label>
    <input id="rule1">
  </div>
  <div>
    <label for="rule2">Rule2</label>
    <input id="rule2">
  </div>
  <div>
    <label for="rule3">Rule3</label>
    <input id="rule3">
  </div>
</div>

解决方法:

这是对出了什么问题的解释.这是你的选择器的结果.它发挥作用的奇怪之处在于你的html结构和使用querySelector.

div.rules：nth-child()

这将首先定位< div class =“rules”>元件.然后,由于两个选择器之间的空间,它将查找该div内部的第n个子元素.接下来,使用querySelector将选择匹配集的第一个元素.

这就是为什么你最终得到第一个< div> with：nth-child(1),因为它实际上匹配每一个nth-child(1),但是第一个结果恰好是你期望的元素.

然而,：nth-child(2)匹配每隔一个子元素太宽了一个网,最终得到第一个div中的第二个孩子,因为那是第一个结果,那就是红色背景出现的地方.

最后的好奇心：nth-child(3)似乎实际上击中了正确的元素只是因为所有html中只有一个第三个子元素,而且它是你所期望的那个,尽管正如前面所解释的原因所解释的那样.假定.

标签：javascript,css,css-selectors
来源： https://codeday.me/bug/20190717/1486006.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – ：nth-​​child(2)不起作用. ：n-child(1)和：nth-​​child(3)

javascript – ：nth-child(2)不起作用. ：n-child(1)和：nth-child(3)