<body>
<ul id="ul_1">
<li>
<div>title_1</div>
<ul>
<li>li_1_1</li>
<li>li_1_2</li>
</ul>
</li>
<li>
<div>title_2</div>
<ul>
<li>li_2_1</li>
<li>li_2_2</li>
</ul>
</li>
</ul>
<div>
<div>div1</div>
<div>div2</div>
<div class="div">div3</div>
<div>div4</div>
<div>div5</div>
<p>p1</p>
<span>span1</span>
</div>
</body>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function(){
// 后代选择器 子辈和孙子辈
$('#ul_1 li').css('border','1px solid red');
// > 子代选择器 只包括子代标签 孙子辈不包括
$('#ul_1>li').css('border','1px solid blue');
// + 同一级的兄弟节点(要相邻的)
$('.div+div').css('color','blue');
// ~ 后面的同级兄弟节点
$('.div~div').css('border','1px solid lightblue');
})();
</script>
jQuery层级选择器
最新推荐文章于 2024-06-08 19:06:47 发布