1). E F 匹配 E 元素下所有的子元素 F （后代选择器）
.box a{
color: red;
}
匹配 .box 下所有的子元素 a
2). E > F 匹配 E 元素下第一级子元素 F （子选择器）
.box>a{
color: red;
}
匹配 .box 下第一级子元素 a
3). E + F 匹配 E 元素后面紧邻的那一个 F 元素（有且仅有一个）（相邻兄弟选择器）
.box+h1{
color: red;
}
匹配 .box 后面紧邻的那一个h1元素
4). E ~ F 匹配 E 元素后面所有的 F 元素（可以匹配到多个）（通用兄弟选择器）
.box~h1{
color: red;
}
匹配 .box 后面所有的 h1 元素
另:
* css层级选择器有4个
* 1.后代选择器: $('div p'),在祖先元素的所有后代(子孙)中,查询指定元素
* 2.子元素选择器: $('div > p'),在父元素的所有第一级子元素中进行查找
* 3.相邻选择器: $('.top + li'),选择当前元素的直接同级相邻元素
* 4.兄弟选择器: $('.top ~ li'),选择当前元素后面所有同级兄弟元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简单的CSS选择器-层级选择器</title> 6 </head> 7 <body> 8 <div> 9 <span>div子元素span</span> 10 <p id="part">PHP中文网<span>div的子元素p中的span</span></p> 11 <ul> 12 <li class="current">列表项01</li> 13 <li>列表项02</li> 14 <li><a href="">列表项03</a></li> 15 <li><a href="">列表项04</a></li> 16 <li>列表项05</li> 17 <li>列表项06</li> 18 <li id="just">列表项07(id="just")</li> 19 <li>列表项08 <span>div子元素ul的子元素li中的span</span></li> 20 <li>列表项09 <span>div子元素ul的子元素li中的span</span></li> 21 <li>列表项10</li> 22 <p>我是列表中的p标签</p> 23 </ul> 24 <p>不知不觉又大了一岁</p> 25 </div> 26 </body> 27 </html> 28 29 <script src="Scripts/jquery-3.4.1.min.js"></script> 30 <script type="text/javascript"> 31 //1.后代选择器 32 $('div span').css('background-color', 'wheat') 33 //2.子元素选择器 34 //将div下面所有的子元素,前景色设置为蓝色 35 //<a>非子元素所以文本不变色,<span>文本变色是因为继承了父元素样式 36 $('div > *').css('color', 'blue') 37 //仅将<div>中的子元素<p>的前景色设置红色 38 $('div > p').css('color', 'red') 39 //3.相邻选择器 40 //匹配class="current"元素的直接下一个元素,有且只有一个 41 $('.current + li').css('color', 'cyan') 42 //选择id=part元素直接相邻元素ul 43 $('#part + ul ').css('border', '1px dotted red') 44 //因为直接相邻同级元素只有一个,只能是<ul>,所以可以省略 45 $('#part + ').css('border', '1px dotted green') 46 //4.兄弟选择器 47 //匹配id="just"元素后面的所有兄弟元素 48 $('#just ~ *').css('color', 'red') 49 </script>