jQuery Selectors(选择器)的使用(七、子元素篇)

本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
本篇讲解：:nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！
您可以到jQuery官网来学习更多的有关jQuery知识。
运行后，请刷新下，因为需要加载jquery,默认是输出，不会加载远程的js文件的。
</p><p><b><br /><b><br /><title>jQuery-Selectors-6</title> </p><p></b> </p><p>.div<br />{<br /> width:95%;<br /> margin-left:15px;<br /> margin-top:15px;<br /> margin-right:15px;<br /> padding-left:5px;<br /> padding-top:5px;<br /> padding-bottom:5px;<br /> background-color:#ccc;<br /> border:#999 1px solid;<br /> line-height:30px;<br /> font-size:13px;<br /> font-family:微软雅黑;<br />}<br />.blue{color:Blue;}<br />.green{color:Green;}<br />.button{border:green 1px solid;width:100px;}<br />.xiaobiao{ font-weight:bold;}<br />.red_test{background-color:red; color:White; width:300px; height:30px;}<br />.li_test{border:#000 1px solid;} </p><p>jQuery-Selectors(选择器)的使用(七、子元素篇)<br />本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！</p><p>本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。</p><p>本篇讲解：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。</p><p>您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com </p><p>由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！</p><p>您可以到jQuery官网来学习更多的有关jQuery知识。</p><p><strong>版权所有：code-cat 博客:http://www.cnblogs.com/bynet 转载请保留出处和版权信息！</strong> </p><p>在IE6、IE7、火狐下测试过了，效果都很明显。 </p><p>1. :nth-child(index/even/odd/equation)用法</p><p>定义：匹配其父元素下的第N个子或奇偶元素 ‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ </p><p>可以使用如下语法：</p><p>:nth-child(2) //索引为2的元素</p><p>:nth-child(even) //索引为偶数元素</p><p>:nth-child(odd) //索引为奇数元素</p><p>:nth-child(3n) //索引为3 * n的元素，n=0,1,2,3,4…，呃…3不是死的，你可以换成如1,2,4,5,6…之类的，下同</p><p>:nth-child(3n+1) //索引为3 * n + 1的元素，n=0,1,2,3,4… <div class="pagination"><a title="Page"> <b>1</b>/<b>3</b> </a>   <b>1</b> <a href="/cos/2020/0517/509902_2.shtml">2</a> <a href="/cos/2020/0517/509902_3.shtml">3</a> <a href="/cos/2020/0517/509902_2.shtml">下一页</a> <a href="/cos/2020/0517/509902_3.shtml">尾页</a></div> </div> </div> </div> <div class="postMore"> <div class="tab" id="tab"> <span class="active">相关文章</span> <span>大家在看</span> </div> <div class="tabdiv"> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0310/1096524.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/58/08/1096524.jpg" src="https://www.easck.com/d/file/ap/58/08/1096524.jpg"></div> <div class="txtInfo"><h3>Office升级后，如何继续使用Outlook 2003</h3><div class="extr clearfix"><p><span class="time fl">2023-03-10</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094418.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg"></div> <div class="txtInfo"><h3>USB调试在哪里打开 手机USB调试模式设置大全</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093232.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg" src="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg"></div> <div class="txtInfo"><h3>一步一步学Nero Burning ROM</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093019.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg" src="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg"></div> <div class="txtInfo"><h3>DVD刻录势如破竹，品牌盘片大刀阔斧</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090649.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg"></div> <div class="txtInfo"><h3>蚂蚁Chrome中国版抢票攻略</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090603.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg" src="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg"></div> <div class="txtInfo"><h3>千牛云盘怎么免费扩容 千牛云盘免费扩容教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0119/1087414.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg" src="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg"></div> <div class="txtInfo"><h3>gzip是什么文件?gzip文件怎么打开?</h3><div class="extr clearfix"><p><span class="time fl">2023-01-19</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086996.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg"></div> <div class="txtInfo"><h3>美图秀秀营造光晕朦胧意境</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086991.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之点亮绚丽夜景倒影</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086793.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg" src="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg"></div> <div class="txtInfo"><h3>美图淘淘教程之快速美化百张宝贝图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0310/1096524.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/58/08/1096524.jpg" src="https://www.easck.com/d/file/ap/58/08/1096524.jpg"></div> <div class="txtInfo"><h3>Office升级后，如何继续使用Outlook 2003</h3><div class="extr clearfix"><p><span class="time fl">2023-03-10</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094418.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg"></div> <div class="txtInfo"><h3>USB调试在哪里打开 手机USB调试模式设置大全</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093232.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg" src="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg"></div> <div class="txtInfo"><h3>一步一步学Nero Burning ROM</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093019.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg" src="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg"></div> <div class="txtInfo"><h3>DVD刻录势如破竹，品牌盘片大刀阔斧</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090649.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg"></div> <div class="txtInfo"><h3>蚂蚁Chrome中国版抢票攻略</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090603.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg" src="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg"></div> <div class="txtInfo"><h3>千牛云盘怎么免费扩容 千牛云盘免费扩容教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0119/1087414.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg" src="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg"></div> <div class="txtInfo"><h3>gzip是什么文件?gzip文件怎么打开?</h3><div class="extr clearfix"><p><span class="time fl">2023-01-19</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086996.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg"></div> <div class="txtInfo"><h3>美图秀秀营造光晕朦胧意境</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086991.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之点亮绚丽夜景倒影</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086793.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg" src="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg"></div> <div class="txtInfo"><h3>美图淘淘教程之快速美化百张宝贝图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <footer> <p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p> <div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div> </footer> <script type="application/ld+json"> { "@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld", "@id": "https://wap.easck.com/cos/2020/0517/509902.shtml", "title": "jQuery Selectors(选择器)的使用(七、子元素篇)-易采站长站", "description": "本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：:nth-child(index/even/odd/equation),:first-child,:last-child,", "pubDate": "2020-05-17 T 06:27:52+08:00", "upDate": "2020-05-17 T 06:27:52+08:00", "data":{ "WebPage":{ "pcUrl":"https://www.easck.com/cos/2020/0517/509902.shtml", "wapUrl":"https://www.easck.com/cos/2020/0517/509902.shtml", "fromSrc":"易采站长站" } } } </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>