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>