<div>这是第一个div标签</div> <div>这是第二个div标签</div> <div>这是第三个div标签</div> <script type="text/javascript"> $(function(){ $("div[class*='Div']").css("color","red"); }); </script>
结果：
这是第一个div标签
这是第二个div标签
这是第三个div标签
36. [attrSel1][attrSel2][attrSelN] : 复合属性选择器，需要同时满足多个条件时使用
<div>这是第一个div标签</div> <div>这是第二个div标签</div> <div>这是第三个div标签</div> <script type="text/javascript"> $(function(){ $("div[id][class*='Div']").css("color","red"); }); </script>
结果：
这是第一个div标签
这是第二个div标签
这是第三个div标签
37. :first-child : 匹配第一个子元素，类似的 :first 匹配第一个元素，而此选择符将为每个父元素匹配一个子元素
<div> <p>这是第一个div中的第一个p标签</p> <p>这是第一个div中的第二个p标签</p> </div> <div> <p>这是第二个div中的第一个p标签</p> <p>这是第二个div中的第二个p标签</p> </div> <script type="text/javascript"> $(function(){ $("div p:first-child").css("color","red"); }); </script>
结果：
这是第一个div中的第一个p标签
这是第一个div中的第二个p标签
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签
38. :first-of-type : 结构化伪类，匹配E的父元素的第一个E类型的子元素
<div> <div>这是第一个div中的div标签</div> <p>这是第一个div中的第一个p标签</p> <p>这是第一个div中的第二个p标签</p> </div> <div> <p>这是第二个div中的第一个p标签</p> <p>这是第二个div中的第二个p标签</p> </div> <script type="text/javascript"> $(function(){ $("p:first-of-type").css("color","red"); }); </script>
结果：
这是第一个div中div标签
这是第一个div中的第一个p标签
这是第一个div中的第二个p标签
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签
39. :last-child : 匹配最后一个子元素，类似的 :last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素
<div> <p>这是第一个div中的第一个p标签</p> <p>这是第一个div中的第二个p标签</p> </div> <div> <p>这是第二个div中的第一个p标签</p> <p>这是第二个div中的第二个p标签</p> </div> <script type="text/javascript"> $(function(){ $("div p:last-child").css("color","red"); }); </script>
结果：
这是第一个div中的第一个p标签
这是第一个div中的第二个p标签
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签
40. :last-of-type : 结构化伪类，匹配E的父元素的最后一个E类型的子元素，大体的意思跟 :first-of-type 差不多，只是一个是第一个元素，一个是最后一个元素
<div> <p>这是第一个div中的第一个p标签</p> <p>这是第一个div中的第二个p标签</p> <div>这是第一个div中的div标签</div> </div> <div> <p>这是第二个div中的第一个p标签</p> <p>这是第二个div中的第二个p标签</p> </div> <script type="text/javascript"> $(function(){ $("p:last-of-type").css("color","red"); }); </script>
结果：
这是第一个div中的第一个p标签
这是第一个div中的第二个p标签
这是第一个div中的div标签
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签
41. :nth-child : 匹配其父元素下的第N个子或奇偶元素
注意！:eq(index)是从0开始，而这里的 :nth-child的序号是从1开始 的
<div> <p>这是第一个div中的第一个p标签</p> <p>这是第一个div中的第二个p标签</p> </div> <div> <p>这是第二个div中的第一个p标签</p> <p>这是第二个div中的第二个p标签</p> </div> <script type="text/javascript"> $(function(){ $("div p:nth-child(2)").css("color","red"); }); </script>
结果：
这是第一个div中的第一个p标签
这是第一个div中的第二个p标签
这是第二个div中的第一个p标签
这是第二个div中的第二个p标签
42. :nth-last-child : 选择所有他们父元素的第n个子元素，计数从最后一个元素开始到第一个，序号从1开始
注意：要有父级元素