33、实例 jQuery选择器之层级选择器之关系选择器

最新推荐文章于 2024-09-05 19:36:35 发布

xuxianmei

最新推荐文章于 2024-09-05 19:36:35 发布

阅读量674

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/tlxxm/article/details/37592207

版权

jQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery选择器之层级选择器之关系选择器</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script>
//关系选择器
$(document).ready(function() {
	
	$("div").css("border","solid 1px red");//控制所有div元素
	
	$("div>div").css("margin","20px");//控制最外层div元素包含的第一个div子元素
	
	$("div div").css("background-color","#ff0");//控制最外层div元素包含的所有div元素
	
	$("div div div").css("background-color","#f0f");//控制第三层div及其以内的div元素

	$("div+p").css("margin","20px");//控制div相邻的p元素
	
	$("div:eq(1)~p").css("background-color","blue");//控制第二个div后面并列（父元素相同）的所有p元素
    
});
</script>
</head>

<body>
<div>一级DIV元素
    <div>二级DIV元素
        <div>三级DIV元素
        </div>
    <p>段落文本11</p>
	<p>段落文本12</p>   
    </div>
	<p>段落文本21</p>
	<p>段落文本22</p>   
</div>
	<p>段落文本21</p>
	<p>段落文本22</p> 

</body>
</html>