任务描述
本关任务：用 jQuery 向下遍历 DOM 节点。效果如下：
相关知识
为了完成本关任务，你需要掌握：1.children()，2.find()。
向下遍历DOM节点
基本的html结构如下（CSS已省略）：
<div>div (当前元素)<p>p (儿子元素)<span>span(孙子元素)</span></p></div><div>div(父元素)<ul>ul(儿子元素)<li>li(孙子元素)<span>span(曾孙子元素)</span></li></ul></div>
效果图如下：
children()
如何给p元素和ul元素同时设置背景色呢？ 可以发现它们都是div的子元素，这里用children()。代码如下：
$("div").children().css("background", "lightgreen");
效果图如下：
从上面可以看出：children()会返回被选元素的所有直接子元素。
find()
如何给div下的span元素修改背景色呢？ 这里用find()来实现，代码如下：
$("div").find("span").css("background","orange");
效果如下：
从上面可以看出：find()会从被选元素开始查找，一直向下直到最后一个后代元素。
编程要求
在右侧编辑器Begin至End之间填充代码，运用本关学到的方法实现下面的效果。要求如下：
本关操作的元素是div元素；设置p元素的背景色为red；设置span元素的背景色为#fff；
格式注意：
获取元素统一用类名获取；统一用双引号""表示字符串；
效果如下：
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="/jquery-3.3.1.min.js"></script><style>.container{width: 200px;margin: 20px auto;}.box{width: 200px;line-height: 140px;background: orange;text-align: center;font-size: 60px;}</style></head><body><div class="container"><p class="box"><span class="item">KO!</span></p></div><script>$(function(){//----------------- Begin -----------------$(".container").find("span").css("background","#fff");$(".container").children().css("background","red");//----------------- End --------------------})</script></body></html>
