javascript - Jquery 只针对 child 而不是子 child

Question

如果我有以下标记

<div class='parent'>
  <div class='first'>
    First Child
    <div class='second'>
  Sub-child
    </div>
  </div>
</div>

下面是Jquery

$('.parent').children().css("color","#00b3ff");

结果它改变了两个 child 的颜色，因为我只想选择第一个 child (而不是按类(class))。

Answer 1

这样的事情怎么样:

$('.parent').children().css('color', '#00b3ff').find('> div').css('color', 'black')

通过使用“>”，规则将仅应用于直接子级，而不是所有子级(使用 .children() 时)

您需要做的另一件事是确保子项不会继承父项的颜色，可以通过显式赋予它颜色来完成。

这是 JSFIDDLE