这是div中的第二个p标签
这是div中的第三个p标签
43. :nth-last-of-type : 选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个,序号从1开始
<div>
<p>这是div中的第一个p标签</p>
<p>这是div中的第二个p标签</p>
<p>这是div中的第三个p标签</p>
<div>这是div中的div标签</div>
</div>
<script type="text/javascript">
$(function(){
$("p:nth-last-of-type(1)").css("color","red");
});
</script>
结果:
这是div中的第一个p标签
这是div中的第二个p标签
这是div中的第三个p标签
这是div中的div标签
44. :nth-of-type : 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个,序号从1开始
<div>
<div>这是div标签</div>
<p>这是第一个p标签</p>
<div>
<p>这是第二个p标签</p>
<p>这是第三个p标签</p>
</div>
<p>这是第四个p标签</p>
</div>
<script type="text/javascript">
$(function(){
$("p:nth-of-type(2)").css("color","red");
});
</script>
结果:
这是div标签
这是第一个p标签
这是第二个p标签
这是第三个p标签
这是第四个p标签
45. :only-child : 如果某个元素是父元素中唯一的子元素,那将会被匹配,如果父元素中含有其他元素,那将不会被匹配
<div>
<div>这是div标签</div>
<p>这是第一个p标签</p>
</div>
<div>
<p>这是第二个p标签</p>
</div>
<script type="text/javascript">
$(function(){
$("p:only-child").css("color","red");
});
</script>
结果:
这是div标签
这是第一个p标签
这是第二个p标签
46. :only-of-type : 选择所有没有兄弟元素,且具有相同的元素名称的元素,如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配
<div>
<div>这是div标签</div>
<p>这是第一个p标签</p>
</div>
<div>
<p>这是第二个p标签</p>
<p>这是第三个p标签</p>
</div>
<script type="text/javascript">
$(function(){
$("p:only-of-type").css("color","red");
});
</script>
结果:
这是div标签










