: 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">. Затем он будет искать всех элементов, которые являются n-ным дочерним элементом в этом div из-за пробела между двумя селекторами. После этого с помощью querySelector будет выбран первый элемент соответствующего набора.

Вот почему вы в итоге получили первый <div> с :nth-child(1), потому что он фактически соответствовал каждому nth-потомку (1), но получение первого результата было совпадением с ожидаемым вами элементом.

Однако, :nth-child(2), соответствующий каждому второму дочернему элементу, был слишком широк от сети и в итоге получил второго дочернего элемента в первом div, и, поскольку это был первый результат, именно там появился красный фон.

Последнее любопытство :nth-child(3), казалось бы, действительно ударило по нужному элементу, было только потому, что во всем этом html есть только один третий дочерний элемент, и это был тот, который вы ожидали, хотя, как объяснялось по причинам, отличным от предполагаемых .

Answer 2

Вы хотите, чтобы таргетинг был только на прямых детей из 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 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');

Answer 4

Простым решением было бы добавить простой 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 5

document.querySelector вернет один элемент, и, как вы можете видеть, ваш ввод красного цвета, потому что к нему применяется правило 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 6

попробуй так:

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)