上节课讲了基础选择器，我们来回顾一下，基础选择器包括类选择器，id选择器，元素选择器，以及这几种混和在一块的用法。今天我们来讲层次选择器。
何为层次选择器呢？
如果我们想通过DOM元素之间的层次关系来获取特定元素，比如后代元素，子元素，相邻元素，兄弟元素等，就需要层次选择器，下面我把层次选择器常用的几种列出一张表格：
| 选择器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 选取ancestor里的所有descendant后代元素 | 集合元素 | $('div span)选取div里的所有span元素 |
| $("parent>child") | 选取parent元素下的child子元素 | 集合元素 | $('div>span')选取div元素下元素名是span的子元素 |
| $("prev+next") | 选取紧接在prev后的next元素 | 集合元素 | $('.one+div')选取class为one的下一个<div>元素 |
| $("prev~siblings) | 选取prev后的所有siblings元素 | 集合元素 | $('#two~div') 选取id为two的元素后面的所有<div>兄弟元素 |
说完了层次选择器，大家光看肯定不行，得会用，我这里写了一个小demo，来给大家演示一下每一个选择器的用法，请看：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
</head>
<body>
<div class="one" id="one">
id为one，class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two，class为one，title为test的div
<div class="mini" title="other">class为mini，title为other</div>
<div class="mini" title="test">class为mini，title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini，title为tesst</div>
</div>
<div style="display: none;" class="one">style的display为none的div</div>
<div class="hide">class为hide的div</div>
<div>包含input的type为hidden的div<input type="hidden" size="8"/></div>
<span id="mover">正在执行动画的span元素</span>
</body>
</html>这是一段html代码，相信能看到jquery的，对基础的html代码也肯定很熟悉了，下面我们来做几道题，这里用到一个知识点，后面会详细讲到，更改css样式，用.css("属性",'值')
1.改变<body>内所有<div>的背景色
$('body div').css('background','#bbffaa');既然让我们改变div的背景色，是不是得找到所有div，怎么找，那就是$('body div')，设置背景色用.css('background','#ffbbaa');
2.改变<body>内子<div>元素的背景色
$('body>div').css('background','pink');3.改变class为one的下一个div的背景色
$('.one+div').css('background','yellow');4.改变id为two的元素后面的所有<div>兄弟元素的背景色
$('#two~div').css('background','skyblue');好，今天这一讲结束，大家有时间多多练习，就熟悉了，Jquery本身不是很难，很容易上手，有不会的欢迎评论区留言，大佬请绕过。本系列专为小白准备。
标签：Jquery,mini,元素,class,---,background,div,选择器 From： https://blog.csdn.net/qq_45461146/article/details/143723311