html5 javascript 新增加的高级选择器更精准更实用

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>js新增选择器</title>
</head>
<body>
<h3>标题2</h3>
   <h2>标题1</h2>

   <ul id="u1">
       <li >列表项1</li>
       <li class="ll">列表项</li>
       <li class="bb">列表项</li>
       <li class="ll">列表项</li>
       <li class="ll">
           <p>u1里面的段落</p>
       </li>
   </ul>
<ul id="u2">
<li>列表项1</li>
<li class="bb">列表项2</li>
<li class="bb">列表项3</li>
<li class="bb">列表项4</li>
<li >列表项ls</li>
</ul>
<script>
   function myfun1(){
// document.querySelector("li").style.backgroundColor="red";
// document.querySelector("#u2").style.backgroundColor="red";
document.querySelector(".ll").style.backgroundColor="blue";
document.querySelector(".bb").style.backgroundColor="red";
   }
   function myfun2(){
document.querySelector("#u2>li+li+li").style.backgroundColor="green";
document.querySelector("#u1 li p").style.backgroundColor="green";
   }
       function myfun3(){

document.querySelector("h2,h3").style.backgroundColor="green";
   }
function myfun4(){
var x=document.querySelectorAll("#u2 .bb");
x[1].style.backgroundColor="orange";
// alert(x.length);
for (var i = 0; i < x.length; i++) {
   x[i].style.backgroundColor="green";
}
   }

function myfun5(){
var u1=document.getElementById('u1');
// var arr=document.querySelectorAll("#u1>li");
var arr=u1.getElementsByTagName('li');
alert(arr.length);
var newli=document.createElement("li");
u1.appendChild(newli);
newli.innerHTML="新增加的项目";
alert(arr.length);
   }

   function myfun6(){
var x=document.getElementsByClassName("bb");
for (var i = 0; i < x.length; i++) {
   x[i].style.backgroundColor="green";
}
   }

   myfun6();
</script>
</body>
</html>

天道酬勤，厚积薄发。君子之行，静以修身，俭以养德。非淡泊无以明志，非宁静无以致远。如有恒，何须三更起，半夜眠；最怕莫，三天打鱼两天晒网，竹篮打水一场空。