jQuery层级选择器

最新推荐文章于 2024-06-08 19:06:47 发布

YOUAFR

最新推荐文章于 2024-06-08 19:06:47 发布

阅读量221

点赞数

分类专栏： day04(jQuery)

本文链接：https://blog.csdn.net/YOUAFR/article/details/78334294

版权

day04(jQuery) 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<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>