<div> <p>这是div中的第一个p标签</p> <p>这是div中的第二个p标签</p> <p>这是div中的第三个p标签</p> </div> <script type="text/javascript"> $(function(){ $("div p:nth-last-child(1)").css("color","red"); }); </script>
结果：
这是div中的第一个p标签
这是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标签
这是第一个p标签
这是第二个p标签
这是第三个p标签
47. :input : 匹配所有 input, textarea, select 和 button 元素
<form> <input type="text" /> <input type="button" /> <input type="checkbox" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button> </form> <script type="text/javascript"> $(function(){ $(":input").css("color","red"); }); </script>
结果：
Button
48. :text : 匹配所有的单行文本框
<form> <input type="text" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> </form> <script type="text/javascript"> $(function(){ $(":text").css("color","red"); }); </script>
结果：
49. :password : 匹配所有密码框
<form> <input type="text" /> <input type="password" /> <input type="submit" /> </form> <script type="text/javascript"> $(function(){ $(":password").css("color","red"); }); </script>
结果：
50. :radio : 匹配所有单选按钮