<!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/post/7780.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知