jQuery 层级选择器demo效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(function () {
      // 获取ul的li设置粉色

      // 后代选择器，儿孙曾孙玄孙....
      var jqLi = $("ul li");
      jqLi.css("margin", 5);
      jqLi.css("background", "pink");

      // 子代选择器，亲儿子
      var jqOtherLi = $("ul>li");
      jqOtherLi.css("background", "red");

      // 更多的选择器与CSS同步...
    })
  </script>
</head>
<body>
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
    </ol>
  </ul>
</body>
</html>

demo 效果：