<style type="text/css">

.one{width:1000px; height:800px; border:1px solid #FF0000}

.two{width:800px; height:600px; border:1px solid #000000; margin:50px;}

.three{width:700px; height:500px; border:1px solid #CC00FF; margin:50px;}

.four{width:600px; height:400px; border:1px solid #0000FF; margin:50px; }

</style>

<button id="xj" type="button">four加背景</button>

<button id="rxj" type="button">four元素的父级也就是上级元素加加背景</button>

<button id="txj" type="button">four元素的所有上级元素加背景</button>

<button id="gxj" type="button">four元素的上级某个元素处截止加背景</button>

<div class="one">

<div class="two">

<div class="three">

<div class="four"></div>

</div>

</div>

</div>

<script type="text/javascript">

$(document).ready(function(){//页面加载完在执行jq

$("#xj").click(function(){

$(".four").css({"background":"#006666"})

});

//上面是找到某个元素给他加个背景

$("#rxj").click(function(){

$(".four").parent().css({"background":"#000"})

});

//上面是给four元素的父级也就是上级元素加加背景

$("#txj").click(function(){

$(".four").parents().css({"background":"#115611"})

});

//上面是给four元素的所有父级加上背景色

$("#gxj").click(function(){

$(".four").parentsUntil(".one").css({"background":"#112697"})

});

//上面是four元素的上级某个元素处截止加背景

});

</script>