3

如果我有以下标记

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

下面是Jquery

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

结果它改变了两个孩子的颜色，因为我只想选择第一个孩子（而不是按班级）。

4

7 回答 7

6

像这样的东西怎么样：

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

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

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

这是JSFIDDLE

于 2013-09-11T11:27:12.043 回答
3

你不能简单地这样做，css属性是由儿童继承的——所以如果你对它应用颜色，first它就会被继承，second因为它是first

由于我们无法将样式应用于文本节点，因此可能的解决方案是用元素包装文本节点并为其设置样式，如下所示

$('.parent > div').contents().filter(function(){
    return this.nodeType == 3 && $.trim($(this).text()).length > 0;
}).wrap('<span />').parent().css('color', '#00b3ff');

演示：小提琴

于 2013-09-11T11:33:17.310 回答
2

演示

var sel = $('.parent').children();
var old_color = sel.css('color');
sel.css('color', '#00b3ff');
sel.children().css('color', old_color);
于 2013-09-11T11:34:18.630 回答
0

No one post it, so, using only CSS:

DEMO

.parent > div{
    color:#00b3ff;
}
.parent div div {
    color:black;
}
于 2013-09-11T11:58:30.947 回答
-1 
$('.parent').next('div').css("color","#00b3ff");
于 2013-09-11T11:27:33.047 回答
-1 
    $(".parent > div:eq(0)").css("color","#00b3ff");
    $(".parent > div:first").css("color","#00b3ff");
于 2013-09-11T11:31:18.343 回答
-1 
$('.parent').children( '.first' ).css("color","#00b3ff");
于 2013-09-11T11:31:41.197 回答