jQuery改变单个元素属性问题

今天在做练习的时候，遇到了一个问题：
我做了一个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("文字已居中");
                }
            );

        });

以下是效果图

完美解决！