jQ层级选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

</body>
</html>
<h1>沁园春·雪</h1>
<h2>毛***</h2>
<div>
<span>
<div>北国风光,千里冰封,万里雪飘。
<div>望长城内外,惟余莽莽;大河上下,顿失滔滔。</div>
<p>山舞银蛇,原驰蜡象,欲与天公试比高。</p>
<p>须晴日,看红装素裹,分外妖娆。</p>
</div>
</span>
<p id="mp">江山如此多娇,引无数英雄竞折腰。</p>
</div>
<p class="c1">惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。</p>
<p class="c1">一代天骄,成吉思汗,只识弯弓射大雕。</p>
<p>俱往矣,数风流人物,还看今朝。</p>
<!--
1.让id为mp的元素文字大小变成30px
2. 让class名为.c1的元素背景为#CCFF99
3. 将所有的div和p,统一显示间距
4. 将所有的div增加 2像素 实线 红色
5. 将div下的所有子div中文字变蓝色blue
6. 将div中包含的div颜色变成#FF99FF
7. 将div的所有兄弟标签p的字体颜色变成蓝色
8. 将紧跟着div的p标签的边框设为2像素 实线 #009900-->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#mp').css({'fontSize':'30px'})
$('.c1').css({'background':'#cf9'})
$('div,p').css({'margin-top':'30px'})
$('div').css({'border':'2px solid red'})
$('div>div').css({'color':'blue'})
$('div div').css({'background':'#f9f'})
$('div~p').css({'color':'blue'})
$('div+p').css({'border':'2px solid #090'})
</script>

原文地址:https://www.cnblogs.com/zzgyq/p/6529359.html