学习Java的日子 Day67 jQuery，选择器

A 北枝

于 2024-08-14 08:51:08 发布

阅读量394

点赞数 6

分类专栏：学习Java 文章标签：学习 java jquery

本文链接：https://blog.csdn.net/weixin_69595694/article/details/141180618

版权

学习Java 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

jQuery

1.了解jQuery

jQuery是由美国人John Resig于2006年创建的一个开源项目，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）

jQuery是JavaScript外部脚本（库），集JavaScript、CSS、DOM、Ajax于一体的强大框架体系

1.1 jQuery的基本功能

1.访问和操作DOM元素

2.控制页面样式

3.对页面事件的处理

4.与Ajax技术的完美结合

5.大量插件在页面中的运用

1.2 搭建jQuery开发环境

jQuery其实就是一个JavaScript文件，因此，搭建jQuery开发环境十分简单。首先，我们准备了两份jQuery文件

注意：使用jquery，必须建一个js文件夹，导包

在这里插入图片描述

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

2.初始jQuery

jQuery的页面加载事件：不会覆盖，整个页面的html元素全部加载完毕后触发的事件

$(document).ready(function(){

…

})

JS的页面加载事件：会覆盖，整个页面的html元素和资源全部加载完毕后触发的事件

window.onload = function(){

…

}

区别：

1.执行时间不同：$(document).ready在页面框架下载完毕后就执行；而window.onload必须在页面全部加载完毕（包含图片下载）后才能执行。

2.执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而window.onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出

$document).ready(function(){})可以简写成$ (function(){ … })

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			//jQuery的页面加载事件：不会覆盖，整个页面的html元素全部加载完毕后触发的事件
//			$(document).ready(function(){
//				alert("HelloWorld...1");
//			})

			//JS的页面加载事件：会覆盖，整个页面的html元素和资源全部加载完毕后触发的事件
//			window.onload = function(){
//				alert("HelloWorld...1");
//			}

			//jQuery页面加载事件简化版
			$(function(){
				alert("HelloWorld...1");
			})
			
			
		</script>
	</head>
	<body>
		
		<script type="text/javascript">
			
//			$(document).ready(function(){
//				alert("HelloWorld...2");
//			})

//			window.onload = function(){
//				alert("HelloWorld...2");
//			}
			
            //简写
			$(function(){
				alert("HelloWorld...2");
			})
			
		</script>
		
	</body>
</html>

3.jQuery选择器

3.1 jQuery选择器的分类

基本选择器、层次选择器、过滤选择器（表单选择器）

3.2 基本选择器

基本选择器是jQuery中使用最频繁的选择器，它由id、class、标签、通配符组成，通过基本选择器可以实现大多数页面元素的查找

3.2.1 通配符选择器 *

面试题：jQuery的选择器和CSS的选择器的区别

CSS的选择器：选择对应的标签，设置样式

jQuery的选择器：选择对应的标签，操作内容、属性、样式，设置各种事件等等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$("*").css("color","red");
			})
		</script>
	</head>
	<body>
		
		<p>用良心做教育</p>
		<p>做真实的自己</p>
		
		<span>匠心育人</span>
		<span>初心至善</span>
		
	</body>
</html>

3.2.2 id选择器

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("#h1_id").css("color","red");
	})
</script>
</head>
<body>
		
	<h1 id="h1_id">一级标签</h1>
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	<h4>四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>
		
</body>
</html>

3.2.3 class选择器 .

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$(".h1_class").css("color","red");
	})
</script>
</head>
<body>
		
	<h1 class="h1_class">一级标签</h1>
	<h2>二级标签</h2>
	<h3 class="h1_class">三级标签</h3>
	<h4>四级标签</h4>
	<h5 class="h1_class">五级标签</h5>
	<h6>六级标签</h6>
</body>
</html>

3.3.4 标签选择器

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("p").css("color","red");
	})
</script>
</head>
<body>
		
	<p>用良心做教育</p>
	<p>做真实的自己</p>
	
</body>

3.3 群组选择器 ,

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("h1,h3,h5,p").css("color","red");
	})
</script>
</head>
<body>
		
	<h1>一级标签</h1>
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	<h4>四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>
		
	<p>用良心做教育</p>
	<p>做真实的自己</p>
		
</body>
</html>

3.4 派生/上下文关系选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素

选择器	功能描述
ancestor descendant	根据祖先元素匹配所有的后代元素
parent＞child	根据父元素匹配所有的子元素
prev+next	匹配prev后的相邻元素
prev～siblings	匹配prev后面的所有兄弟元素

3.4.1 后代选择器空格

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){

		$("ul a").css("color","red");
	})
</script>
</head>
<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>

3.4.2 子代选择器 >

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){

		$("li>a").css("color","red");
	})
</script>
</head>
<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>

3.4.3 相邻兄弟选择器 +

注意：选择后者

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
        
		$("a+a").css("color","red");
	})
</script>
</head>
<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>

3.4.4 后续选择器 ~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/*
				 * 派生/上下文关系选择器 之 后续选择器
				 * 注意：选择后者
				 */
				$("ul~a").css("color","red");
			})
		</script>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
		
		<p>用良心做教育</p>
		
		<a href="#">超链接10</a> //也是有效果的
		<a href="#">超链接11</a> //也是有效果的
		<a href="#">超链接12</a> //也是有效果的
	</body>
</html>

3.5 简单过滤选择器

简单过滤选择器是使用最广泛的一种

注意：过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		/**
		 * 选择第一个元素
		 * 		$("li:first").css("color","red");
		* 
		* 选择最后一个元素
		* 		$("li:last").css("color","red");
		* 
		* 选择不是第一个元素
		* 		$("li:not(:first)").css("color","red");
		* 
		* 选择下标是偶数的元素
		* 		$("li:even").css("color","red");
		* 
		* 选择下标是奇数的元素
	    * 		$("li:odd").css("color","red");
		* 
		* 选择指定下标的元素
		* 		$("li:eq(2)").css("color","red");
		* 
		* 选择大于下标的元素
		* 		$("li:gt(2)").css("color","red");
		* 
		* 选择小于下标的元素
		* 		$("li:lt(2)").css("color","red");

		*/
	})
</script>
</head>
<body>
		
	<ul>
		  <li>list item 1</li>
		  <li>list item 2</li>
		  <li>list item 3</li>
		  <li>list item 4</li>
		  <li>list item 5</li>
	</ul>
		
</body>
</html>

3.6 内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		
		/**
		 * 选择包含指定内容的元素
		 * 		$("div:contains('John')").css("color","red");
		 * 
		 * 选择没有内容的元素
		 * 		$("div:empty").text("用良心做教育");
		 * 
		 * 选择包含某个子标签的元素
		 * 		$("div:has(p)").css("color","red");
		 * 
		 * 选择包含子标签或内容的元素
		 * 		$("div:parent").text("用良心做教育");
		 */	
	})
</script>
</head>
<body>
		
	<div>John Resig</div>
	<div><p>George Martin</p></div>
	<div>Malcom John Sinclair</div>
	<div>J. Ohn</div>
	<div></div>
		
</body>
</html>

3.7 可见性过滤选择器

可见性过滤选择器根据元素是否可见的特征获取元素

寻找页面中被隐藏的元素

选择不可见的元素

$(“tr:hidden”).css(“display”,“block”); //显示内容

选择可见的元素

$(“tr:visible”).css(“color”,“red”);

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		/**
		 * 选择不可见的元素
		 * 		$("tr:hidden").css("display","block");
		 * 
		 * 选择可见的元素
		 * 		$("tr:visible").css("color","red");
		 */					
	})
</script>
</head>
<body>
		
	<table>
	<tr style="display:none">
	 	<td>Value 1</td>
	 </tr>
	  <tr>
	  	<td>Value 2</td>
	  </tr>
	</table>
		
</body>
</html>

3.8 属性过滤选择器

属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		/**
		 * 选择指定属性的元素
		 * 		$("input[placeholder]").css("color","red");
		 * 
		 * 选择指定属性+值的元素
		 * 		$("input[placeholder='请输入账号...']").css("color","red");
		 * 
		 * 选择指定属性+不等于值的元素
		 * 		$("input[name!='username']").css("color","red");
		 * 
		 * 选择指定属性+以某个值开头的元素
		 * 		$("input[name^='n']").css("color","red");
		 * 
		 * 选择指定属性+以某个值结尾的元素
		 * 		$("input[name$='word']").css("color","red");
		 * 
		 * 选择指定属性+包含某个值的元素
		 * 		$("input[name*='am']").css("color","red");
		 * 
		 * 选择多个属性的元素
		 * 		$("input[name][placeholder]").css("color","red");
		 */
				
			})
		</script>
	</head>
	<body>
		
		<form action="服务器地址" method="post">
			
			账号：<input type="text" name="username" placeholder="请输入账号..."/>
				<br />
			密码：<input type="password" name="password" placeholder="请输入密码..."/>
				<br />
			确认密码：<input type="password" name="repassword"/>
				<br />
			姓名：<input type="text" name="name"/>
				<br />
			昵称：<input type="text" name="nickName" placeholder="请输入昵称..."/>
				<br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball" checked="checked"/>篮球
				<input type="checkbox" name="hobbies" value="shop"/>购物
				<br />
			国籍：
				<select name="nationality">
					<option value="001">韩国</option>
					<option value="002">美国</option>
					<option value="003" selected="selected">中国</option>
					<option value="004">日本</option>
				</select>
				<br />
			
			<input type="submit" value="注册" />
		</form>
	</body>
</html>

3.9 子元素过滤选择器 :nth-child

选择指定的子元素(注意：JQuery选择器中只有nth-child的数字才是表示第几个元素，其余的都是下标)

$(“ul li:nth-child(1)”).css(“color”,“red”);

选择第一个子元素

$(“ul li:first-child”).css(“color”,“red”);

选择最后一个子元素

$(“ul li:last-child”).css(“color”,“red”);

选择只有一个子元素的元素

$(“ul li:only-child”).css(“color”,“red”);

注意：:nth-child(n)从1开始

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
		/**
		 * 选择指定的子元素(注意：JQuery选择器中只有当前选择器的数字才是表示第几个元素，其余的都是下标)
		 * 		$("ul li:nth-child(1)").css("color","red");
		 * 
		 * 选择第一个子元素
		 * 		$("ul li:first-child").css("color","red");
		 * 
		 * 选择最后一个子元素
		 * 		$("ul li:last-child").css("color","red");
		 * 
		 * 选择只有一个子元素的元素
		 * 		$("ul li:only-child").css("color","red");
		 */	
	})
			
</script>
</head>
<body>
		
	<ul>
	  <li>John</li>
	  <li>Karl</li>
	  <li>Brandon</li>
	</ul>
		
	<ul>
	  <li>Glen</li>
	  <li>Tane</li>
	  <li>Ralph</li>
	</ul>
		
	<ul>
	  <li>用良心做教育</li>
	</ul>
		
</body>
</html>

3.10 表单过滤选择器

在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象

input，text，password，radio，checkbox等

:input 表示所有的表单标签

$(“:input”).css(“display”,“none”);

input 表示选择所有的input标签

$(“:input”).css(“display”,“none”);

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
				
		/**
		 * :input 表示所有的表单标签
		 */
		$(":input").css("display","none");				
	})
			
</script>
</head>
<body>
		
	<form>
			
		输入框：<input type="text" /><br />
		密码框：<input type="password" /><br />
		单选框：
		<input type="radio" name="xxx"/>
		<input type="radio" name="xxx"/>
		<input type="radio" name="xxx"/>
		<br />

	</form>
		
</body>
</html>

3.11 表单属性过滤选择器

表单属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected属性

选择可用表单元素

$(“input:enabled”).val(“用良心做教育”);

选择不可用表单元素

$(“input:disabled”).val(“用良心做教育”);

选择选中状态的单选框

alert($(“input[type=‘radio’]:checked”).val());

选择选中状态的下拉列表

alert($(“option:selected”).text());

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		/**
		* 选择可用表单元素
		* 		$("input:enabled").val("用良心做教育");
		* 
		* 选择不可用表单元素
		* 		$("input:disabled").val("用良心做教育");
		*/
				
		})
</script>
</head>
<body>
		
	<form>
		 <input name="email" disabled="disabled" />
		 <input name="id" />
	</form>
		
</body>
</html>

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
								
		$("#btn").click(function(){
					
			//选择选中状态的单选框
			alert($("input[type='radio']:checked").val());
					
		})
				
	})
</script>
</head>
<body>
		
	<form>
		性别：
			<input type="radio" name="sex" value="man" checked="checked" />男
			<input type="radio" name="sex" value="woman" />女
			<input type="button" id="btn" value="普通按钮" />
	</form>
		
</body>
</html>

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
								
		$("#btn").click(function(){
					
			//选择选中状态的下拉列表
			alert($("option:selected").text());
					
		})
				
	})
</script>
</head>
<body>
		
	<form>
		省份：
			<select>
				<option>四川</option>
				<option>湖南</option>
				<option>湖北</option>
				<option>广东</option>
				<option>广西</option>
			</select>
			<input type="button" id="btn" value="普通按钮" />
	</form>
</body>
</html>

3.12 使用总结

监听器：$(“#myId”).click(function() { … })

设置CSS样式：$(“#content”).css(“display”, “none”);

获取到CSS 内key 的value: $(“#content”).css(“display”)

设置属性：$(“#head span img”).attr(“src”, “…/img/open.gif”);

获取到属性值：$(“#head span img”).attr(“src”);

设置内容：$(this).html(“更多”); $(this).text(“更多”);

获取内容：$(this).html(); $(this).text();

3.13 选择器综合案例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择</title>
		<style type="text/css">
			body{font-size:13px}
         	#all{border:solid 1px #666;width:320px;overflow:hidden}
         	#all #head{background-color:#eee;padding:8px;height:18px;cursor:hand}
         	#all #head h3{padding:0px;margin:0px;float:left}
         	#all #head span{float:right;margin-top:3px}
         	#all #content{padding:8px}
         	#all #content ul {list-style-type:none;margin:0px;padding:0px}
         	#all #content ul li{ float:left;width:95px;height:23px;line-height:23px}
         	#all #btn{float:right;padding-top:5px;padding-bottom:5px}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.2.js">
		</script>
		<script type="text/javascript">
			$(function(){
				
                
				$("img").click(function(){
					if($(this).attr("src") == "../img/up.bmp"){
						
						$(this).attr("src","../img/down.bmp");
						$("#content").css("display","none");
						
					}else if($(this).attr("src") == "../img/down.bmp"){
						
						$(this).attr("src","../img/up.bmp");
						$("#content").css("display","block");
					}
				})
				
                
				$("#btn>a").click(function(){
					if($(this).text() == "简化"){
						
						$(this).text("更多");
						$("ul>li:gt(5):not(:last)").css("display","none");
						
					}else if($(this).text() == "更多"){
						
						$(this).text("简化");
						$("ul>li:gt(5):not(:last)").css("display","block");
						
					}
				})
				
                
			})
		</script>
	</head>
	<body>
		<div id="all">
			<div id="head">
				<h3>学科分类</h3>
				<span><img src="../img/up.bmp"/></span>
			</div>
			<div id="content">
				<ul>
					<li>
						<a href="#">JavaEE</a><i> (1110) </i></li>
					<li>
						<a href="#">PHP</a><i> (230) </i></li>
					<li>
						<a href="#">BIG</a><i> (1430) </i></li>
					<li>
						<a href="#">Android</a><i> (1560) </i></li>
					<li>
						<a href="#">IOS</a><i> (870) </i></li>
					<li>
						<a href="#">H5</a><i> (1460) </i></li>
					<li>
						<a href="#">VR</a><i> (1450) </i></li>
					<li>
						<a href="#">小程序</a><i> (1780) </i></li>
					<li>
						<a href="#">演讲</a><i> (930) </i></li>
					<li>
						<a href="#">PPT</a><i> (3450) </i></li>
					<li>
						<a href="#">Word</a><i> (980) </i></li>
					<li>
						<a href="#">其他</a><i> (3230) </i></li>
				</ul>
				<div id="btn">
					<a href="#">简化</a>
				</div>
			</div>
		</div>
	</body>
</html>

4.jQuery对象和DOM对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象

注意：jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法

dom→jQuery：$(dom)

jquery→dom：jquery[0]

4.1 JS对象转jQuery对象

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
				
		//JS对象
		var btn = document.getElementsByTagName("button")[0];
						
		//转jQuery对象，直接就是这个$(btn)
		$(btn).click(function(){
			alert("用良心做教育");
		})
				
			})
</script>
</head>
<body>
		
	<button>普通按钮</button>
		
</body>
</html>

4.2 jQuery对象转JS对象

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
				
		//注意：jQuery对象只能转成JS数组
		var btnArr = $("button");
				
		btnArr[0].onclick = function(){
			alert("做真实的自己");
		}
	})
</script>
</head>
<body>
		
	<button>普通按钮</button>
		
</body>
</html>

A 北枝

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习Java的日子 Day67 jQuery，选择器

2.初始jQuery3.jQuery选择器3.1 jQuery选择器的分类3.2 基本选择器3.2.1 通配符选择器 *3.2.2 id选择器3.2.3 class选择器 .3.3.4 标签选择器3.3 群组选择器 ,3.4 派生/上下文关系选择器选择器功能描述ancestor descendant根据祖先元素匹配所有的后代元素parent＞child根据父元素匹配所有的子元素prev+next匹配prev后的相邻元素
复制链接

扫一扫