:nth-child(2) 不起作用。 :nth-child(1) 和 :nth-child(3) 做

Question

:nth-child(2) 似乎选择了子 1 内部的东西。

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

它似乎不涉及标签的类型，就像几个类似但不同的问题一样。我没有看到问题。

https://jsfiddle.net/rhedin/em56jk9v/

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>

Answer 1

这里是对出错原因的解释。这是您的选择器的结果。其播放方式的奇怪之处在于您的 html 结构和使用 querySelector。

div.rules :nth-child()

这将首先针对<div class="rules"> 元素。然后，由于两个选择器之间有 空间，它将查找该div 内的第n 个子元素的<strong>all</strong> 元素。之后，使用querySelector 将选择匹配集的第一个元素。

这就是你最终得到第一个<div> 和:nth-child(1) 的原因，因为它实际上匹配了每一个nth-child(1)，但巧合的是，得到第一个结果是你所期望的元素。

但是，:nth-child(2) 匹配每个第二个子元素的网络太宽了，最终在第一个 div 中获得了第二个子元素，因为这是第一个结果，所以红色背景出现在了那里。

:nth-child(3) 的最终好奇心似乎实际上击中了正确的元素，只是因为在所有 html 中只有三分之一的子元素，这是您所期望的，尽管出于假设以外的原因进行了解释.

Answer 2

试试这样：

var one   = document.querySelector('div.rules div:nth-child(1)');
var two   = document.querySelector('div.rules div:nth-child(2)');
var three = document.querySelector('div.rules div: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>

我发了div.rules div:nth-child(2)

Answer 3

document.querySelector 将返回 one 元素，您可以看到您的输入是红色的，因为规则 div.rules :nth-child(2) 适用于它，因为它是其父元素中的第二个子元素，因此您将选择它（因为它首先出现在 DOM 树中）而不是 div。

如果您只想定位 div，则应使用 > 选择器，或者使用 div:nth-child() 或考虑使用 document.querySelectorAll 获取与选择器匹配的所有元素：

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');

/*this will add border to all inputs and second div*/
var all = document.querySelectorAll('div.rules  :nth-child(2)');
for(var i=0;i<all.length;i++) {
  all[i].style.border="3px solid green";
}

.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>

Answer 4

您只想定位div.rules 的直接子代。由于您使用的是querySelector，它只返回第一个结果，对于:nth-child(2)，这是第一个 div 中的输入（您会注意到它在您的示例中具有红色背景）

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>

Answer 5

一个简单的解决方案是在选择器中添加一个普通的 div (jsfiddle)

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

有一个关于这种选择器的很棒的网站。你一定要试一试：CSS Diner.

Answer 6

至少指定你的意思是直接的孩子，因为可能有多个嵌套的，程序无法找出你的意思：

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');