首页 > 代码库 > jQ层级选择器
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="http://www.mamicode.com/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>
jQ层级选择器