: لا يعمل الطفل الثاني (2). : nth-child (1) and: nth-child (3) do

:nth-child(2) seems to select something inside of child 1.

الطفل 1 والطفل 3 يعمل بشكل صحيح.

لا يبدو أنها تتضمن نوع العلامة ، حيث أن العديد من الأسئلة المتشابهة ولكنها مختلفة. أنا لا أرى المشكلة.

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
    
    <input id="rule1">
  </div>
  <div>
    
    <input id="rule2">
  </div>
  <div>
    
    <input id="rule3">
  </div>
</div>
</div> </div>
0
تطبيق مباشرة div.rules div: nth-child (n)
وأضاف المؤلف zer00ne, مصدر
نعم ، CSS الصحيح سيكون ".rules div: nth-child (1)" وهكذا.
وأضاف المؤلف MarsAndBack, مصدر

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');
1
وأضاف

تسميات التغليف حول المدخلات يحلها:

الكود الإجباري:


https://jsfiddle.net/p0svy4gL/

1
وأضاف

حاول مثل هذا:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
      
      <input id="rule1">
    </div>
    <div>
      
      <input id="rule2">
    </div>
    <div>
      
      <input id="rule3">
    </div>
  </div>
</div> </div>

I made div.rules div:nth-child(2)

1
وأضاف

document.querySelector will return one element and as you can see your input is red because the rule div.rules :nth-child(2) apply to it as it's the second child inside his parent element, so you will select it (since it come first) and not the div.

You should use > selector if you want to target only the divs or use div:nth-child() or consider document.querySelectorAll to get all the elements that match the selector:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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
.arule {
  background-color: yellow;
}

.brule {
  background-color: red;
}

.crule {
  background-color: blue;
}
<div class="rules">
  <div>
    
    <input id="rule1">
  </div>
  <div>
    
    <input id="rule2">
  </div>
  <div>
    
    <input id="rule3">
  </div>
</div>
</div> </div>
0
وأضاف

سيكون الحل البسيط هو إضافة 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 .

0
وأضاف

تريد أن تستهدف فقط الأطفال المباشرين لـ div.rules . نظرًا لأنك تستخدم querySelector ، فإنها لا تعرض سوى النتيجة الأولى ، بالنسبة إلى : nth-child (2) ، وهذا هو الإدخال في القسم الأول (ستلاحظ لديها خلفية حمراء في المثال الخاص بك)

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
    
    <input id="rule1">
  </div>
  <div>
    
    <input id="rule2">
  </div>
  <div>
    
    <input id="rule3">
  </div>
</div>
</div> </div>
0
وأضاف