今天在做练习的时候，遇到了一个问题：
我做了一个div的嵌套，外层div包裹内层div，在完成其他功能的时候都正常，但是到了改变div内文字颜色的时候出了问题，我只打算改变外层div的文字颜色为白色，但当我点击按钮时，内外层文字颜色同时改变了，我试过将内层文字的颜色清楚，但是不行，还是被改变了。
对应的html代码为：
<p>div控制器</p>
<button id="divbtn1">改变内层div的颜色为黄色</button>
<button id="divbtn2">改变内层div文字居中</button>
<button id="divbtn3">改变外层div字体颜色为白色</button>
<hr>
<div id="divfarther">这是最外层的div
<div id="chiden">这是内层div</div>
</div>
对应的jQuery代码为：
$(document).ready(function(){
$("#divbtn3").click(
function(){
$("#divfarther").css("color","white");
alert("文字颜色已更改");
}
);
$("#divbtn1").click(function(){
$("#chiden").css("background-color","yellow");
alert("更改完成")
});
$("#divbtn2").click(
function(){
$("#chiden").css("text-align","center");
alert("文字已居中");
}
);
});
或：
$(document).ready(function(){
$("#divbtn3").click(
function(){
$("#divfarther").css("color","white");
$("#chiden").css("color","");
alert("文字颜色已更改");
}
);
$("#divbtn1").click(function(){
$("#chiden").css("background-color","yellow");
alert("更改完成")
});
$("#divbtn2").click(
function(){
$("#chiden").css("text-align","center");
alert("文字已居中");
}
);
});
以上代码都不行，因为css又继承性，所以要把元素设置为默认状态
在chiden的color上改为initial
如以下jQuery代码
$(document).ready(function(){
$("#divbtn3").click(
function(){
$("#divfarther").css("color","white");
$("#divfarther > #chiden").css("color","initial");
alert("文字颜色已更改");
}
);
$("#divbtn1").click(function(){
$("#chiden").css("background-color","yellow");
alert("更改完成")
});
$("#divbtn2").click(
function(){
$("#chiden").css("text-align","center");
alert("文字已居中");
}
);
});
以下是效果图
完美解决！
