javascript - :nth-child(2) doesn't work. :nth-child(1) 和 :nth-child(3) 做

Question

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

child 1 和 child 3 工作正常。

好像不涉及tag的类型，几个类似但不同的问题都有。我没有看到问题。

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

像这样尝试:

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)