层级选择器能够根据元素之间的结构关系进行匹配操作，主要包括“包含选择器”，“子选择器”，“相邻选择器”，“兄弟选择器”
选择器 | 说 明 |
包含选择器 （ancestor descendant） | 在给定的祖先元素下匹配所有的后代元素。ancestor表示任何有效的选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如$("form input")可以匹配表单下所有的input元素 |
子选择器 （parent > child） | 在给定的父元素下匹配所有的子元素。parent表示任何有效的选择器，child表示以匹配元素的选择器，并且它是第一个选择器的子元素。例如$("form > input ")可以匹配表单下所有的子级input元素 |
相邻选择器 （prev +next） | 匹配所有紧接在prev元素后的next元素。prev表示任何有效的选择器，next表示一个有效原则器并且紧接着第一个选择器。例如$("label input")可以匹配所有跟在label后面的input元素 |
兄弟选择器 （prev ~ siblings） | 匹配prev元素之后的sibligs元素。prev表示任何有效的选择器，siblings表示一个选择器，并且它作为第一个选择器的同辈。例如$("form ~ input ")可以匹配到所有与表单同辈的input元素 |
例子：包含选择器 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"> </script>
<script type="text/javascript">
$(function(){
$("form input").css({"border":"1px solid red","background":"green",});
})
</script>
</head>
<body>
<form>
<!--<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。-->
<fieldset>
<label>
包含的子文本框
<input />
</label>
<fieldset>
<label>
包含的孙文本框
<input />
</label>
</fieldset>
</fieldset>
</form>
<label>
非包含的文本框
<input />
</label>
</body>
</html>例子：子选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style>
img
{
height:200px;
}
</style>
</head>
<body>
<div>
<span>
<img src="image/0001.jpg"/>
</span>
<img src="image/0002.jpg"/>
</div>
<img src="image/0003.jpg"/>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("div > img").css("border","5px solid red");
})
</script>
</html>例子 ： 相邻选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻选择器匹配</title>
<style>
img
{
height:200px;
}
</style>
</head>
<body>
<div>
<span>
<img src="image/0001.jpg"/>
</span>
<img src="image/0002.jpg"/>
</div>
<img src="image/0003.jpg"/>
<img src="image/0004.jpg"/>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("div + img").css("border","5px solid red");
})
</script>
</html>例子：兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<style>
img
{
height:200px;
}
</style>
</head>
<body>
<div>
<span>
<img src="image/0001.jpg" />
</span>
<img src="image/0002.jpg"/>
</div>
<img src="image/0003.jpg"/>
<img src="image/0004.jpg"/>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("div ~ img").css("border","5px solid red");
})
</script>
</html>例子：层级选择器综合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器控制HTML文档各级元素</title>
</head>
<body>
<div>一级div元素
<div>二级div元素
<div>三级div元素</div>
<p>段落文本11</p>
<p>段落文本12</p>
</div>
<p>段落文本21</p>
<p>段落文本22</p>
</div>
<p>段落文本31</p>
<p>段落文本32</p>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").css("border","1px solid red");//控制文档中所有的div元素
$("div > div").css("background","yellow");//控制div元素包含的div子元素，实际上它与div包含选择器所匹配的元素是相同的
$("div div ").css("border","10px solid green");//控制最外层div元素包含的所有div元素
$("div div div").css("background","blue");//控制第三层及其以内的div元素
$("div + p").css("margin","2em");//控制div相邻的p元素
$("div:eq(1) ~ p").css("background","#ccc");//控制div后面并列的所有p元素
})
</script>
</html>
