兄弟选择器
2018-04-05 本文已影响0人
知识分享share
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>id</title>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<div class="aaron">
<p>id="aaron"</p>
<p>选中</p>
</div>
<div class="aaron">
<p>id="aaron"</p>
<article>选中
<p>nihao</p></article>
</div>
<div class="imooc">
<p>id="imooc"</p>
<p>jquery选中</p>
</div>
<div class="imooc">
<p>id="imooc"</p>
<p>jquery未选中</p>
</div>
<h2>相邻兄弟选择器与一般兄弟选择器</h2>
<div class="bottom">
<div>兄弟节点div, +~选择器不能向前选择</div>
<span class="prev">选择器span元素</span>
<div>span后第一个兄弟节点div</div>
<div>兄弟节点div
<div class="small">子元素div</div>
</div>
<span>兄弟节点span,不可选</span>
<div>兄弟节点div</div>
</div>
<script type="text/javascript">
$(".prev+div").css("color","blue");
$(".prev~div").css("color","blue");
</script>
<script>
$("div>p").css("color","red");
$("div p").css("color","red");
</script>
</body>
</html>
