7. parent > child : 在给定的父元素下匹配所有的子元素
<div>
<span>这是第一个span标签</span>
<p>
<span>这是第二个span标签</span>
</p>
</div>
<script type="text/javascript">
$(function(){
$("div > span").css("color","red");
});
</script>
结果:
这是第一个span标签
这是第二个span标签
8. prev + next : 匹配所有紧接在 prev 元素后的 next 元素
<div></div>
<p>这是第一个p标签</p>
<p>这是第二个p标签</p>
<script type="text/javascript">
$(function(){
$("div + p").css("color","red");
});
</script>
结果:
这是第一个p标签
这是第二个p标签
9. prev ~ siblings : 匹配 prev 元素之后的所有 siblings 同辈元素
<p>这是第一个p标签</p>
<div>
<p>这是第二个p标签</p>
</div>
<p>这是第三个p标签</p>
<script type="text/javascript">
$(function(){
$("div ~ p").css("color","red");
});
</script>
结果:
这是第一个p标签
这是第二个p标签
这是第三个p标签
10. :first : 获取第一个元素
<div>
<p>这是第一个p标签</p>
<p>这是第二个p标签</p>
<p>这是第三个p标签</p>
</div>
<script type="text/javascript">
$(function(){
$("p:first").css("color","red");
});
</script>
结果:
这是第一个p标签
这是第二个p标签
这是第三个p标签
11. :not(selector) : 去除所有与给定选择器匹配的元素
<p class="del">这是第一个p标签</p>
<p class="del">这是第二个p标签</p>
<p>这是第三个p标签</p>
<script type="text/javascript">
$(function(){
$("p:not(.del)").css("color","red");
});
</script>
结果:
这是第一个p标签
这是第二个p标签
这是第三个p标签
12.:even : 匹配所有索引值为偶数的元素,从 0 开始计数
<p>这是索引值为0的p标签</p>
<p>这是索引值为1的p标签</p>
<p>这是索引值为2的p标签</p>
<p>这是索引值为3的p标签</p>
<script type="text/javascript">










