jquery选择器 子元素 3
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.3.min.js.js"></script> <script type="text/javascript"> $(function(){ // 选择div中p标签的父级的第一个子元素 // $("div p:first-child").css({'color':'blue','font-size':'22px'}); // 选择div中span标签的父级的第一个子元素,父级的第一个子元素须是span,否则不会被选中 last-child 是最后一个 // $("div span:first-child").css({'color':'blue','font-size':'22px'}); // 选择div中的span标签的父级元素的第一个span标签 type判断类型 last-of-type 是最后一个 // $("div span:first-of-type").css({'color':'blue','font-size':'22px'}); // 选择div中的span标签的父级元素的第2(n)个span标签 nth-last-of-type()这个是倒数 last最后 // $("div span:nth-of-type(2)").css({'color':'blue','font-size':'22px'}); // 选择的是div里span标签的父级元素的第一个子元素 eq或者数级是从0开始算的 nth的序号是从1开始算的 // 注意:第一个子元素 子元素如果是span,那么就选中,如果不是,就不选 // $("div span:nth-child(1)").css({'color':'blue','font-size':'22px'}); // 可以这样选第2个，如果是就选中 nth-last-child()这个是倒数来的 // $("div span:nth-child(2)").css({'color':'blue','font-size':'22px'}); // 选择div 是独生子的p标签,一个DIV里只有一个p标签,没有其它任何标签的, 有其它标签不会选中 // $("div p:only-child").css({'color':'blue','font-size':'22px'}); // of-type 把不符合条件的都过滤掉 // 选择的是父级元素唯一p标签的p标签,不管div里有多少个标签,只要p标签是唯一的就会被选中 $("div p:only-of-type").css({'color':'blue','font-size':'22px'}); }) </script> </head> <body> <div> <p>独生子 唯一的</p> <a href=""></a> </div> <div> <p>我是p标签0</p> <span>我是span标签1</span> <p>我是p标签2</p> <span>我是span标签3</span> <p>我是p标签4</p> <span>我是span标签5</span> <p>我是p标签6</p> <span>我是span标签7</span> </div> ---------------------------------------------------------- <div> <p>我是p标签0</p> <span>我是span标签1</span> <p>我是p标签2</p> <span>我是span标签3</span> <p>我是p标签4</p> <span>我是span标签5</span> <p>我是p标签6</p> <span>我是span标签7</span> </div> </body> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知