：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

尝试这样：

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 2

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 3

这是哪里出了问题的解释。这是您选择器的结果。播放方式的奇怪之处归因于您的html结构以及使用querySelector。

div.rules :nth-child()

这将首先定位<div class="rules">元素。然后，由于两个选择器之间的空格，它将查找该div中第n个子元素的 all 元素。之后，使用querySelector将选择匹配集中的 first 元素。

这就是为什么您最终获得第一个<div>和:nth-child(1)的原因，因为它实际上与每个nth-child（1）匹配，但是取得第一个结果恰好是您期望的元素。

但是，:nth-child(2)匹配的每个第二个子元素的网络太宽了，最终在第一格中获得了第二个子元素，由于这是第一个结果，因此红色背景显示上。

:nth-child(3)的最终好奇心似乎确实触及了适当的元素，这仅仅是因为所有html中只有三分之一的子元素，而这正是您所期望的，尽管出于其他原因进行了解释比假设的要好。

Answer 4

您只想定位var url = "https://api.themoviedb.org/3/tv/popular?api_key=YOURKEY&language=en-US&page=1"; var img = "https://image.tmdb.org/t/p/w500" var tvSeriesImg = []; var request = new XMLHttpRequest(); // New instance of XMLHttpRequest request.open('GET', url, true); // Open the connection using the 'GET' Method request.onload = function(){ // Create an onload function this is where the data is displayed on the webpage var data = JSON.parse(this.response); // Creating a data variable where our JSON is parsed and stored. if(request.status >= 200 && request.status < 400){ // Check the request status. data.results.forEach(results => { //Looping through the JSON Array const popTvSeries = document.getElementById('tv-series-data'); const popTvSeriesCard = document.createElement('div'); popTvSeriesCard.setAttribute('id', 'card'); popTvSeries.appendChild(popTvSeriesCard); tvSeriesImg.push(results.poster_path); //Get the first 6 items from the array!! console.log(tvSeriesImg.slice(0, 6)); const tvImage = document.createElement('img'); tvImage.src = img + tvSeriesImg.slice(0, 6); tvImage.setAttribute('id', 'movieThumb'); popTvSeriesCard.appendChild(tvImage); }); } } request.send(); 的直接子级。由于您使用的是div.rules，因此它仅返回第一个结果，对于querySelector，这是第一个div的输入（您会注意到示例中的背景为红色）

:nth-child(2)

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;
}

Answer 5

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

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