代码之家 › 专栏 › 技术社区 › user2171796

:n孩子(2)不工作。:nth child(1)和:nth child(3)do

css-selectors css javascript

user2171796 · 技术社区 · 6 年前

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

6 回复 | 直到 6 年前

Travis J 6 年前

这是一个错误的解释。这是你选择的结果。它的奇特之处在于您的HTML结构和使用的queryselector。

div.rules :nth-child()

这将首先针对 <div class="rules"> 元素。然后,它会寻找 全部的 元素,因为 两个选择器之间的空间。接下来,使用 querySelector 将选择第一匹配集的元素。


   
    这就是为什么你得到第一个
    
     <div>
    
    具有
    
     :nth-child(1)
    
    ,因为它实际上匹配每个第n个子元素(1),但是采用第一个结果恰好是您期望的元素。
   
   
    然而,
    
     :nth-child(2)
    
    匹配每一个第二个子元素都太宽了,结果在第一个分区中得到了第二个子元素,因为这是第一个结果,所以出现了红色背景。
   
   
    最后的好奇心
    
     :nth-child(3)
    
    似乎真正击中了正确的元素仅仅是因为在所有的HTML中只有第三个子元素,而且它是您所期望的,尽管正如所解释的,原因并非假定的那样。

doğukan 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)

Temani Afif 6 年前

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>

jmcgriz 6 年前

你只想瞄准 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>

aloisdg 6 年前

一个简单的解决方案是在选择器中添加一个普通的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 .

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