Live
<p class="select">father的哥哥或姐姐</p><div id="father">father <p id="john" class="select">john</p> <div id="joy">joy <p id="tim" class="select">tim (joy的小孩)</p> </div> <p id="tom" class="select">father的子層</p></div><p class="select">father的大弟或大妹</p><div id="mother">mother <p id="ken" class="select">ken</p> <p id="eason">eason</p> <p id="kevin" class="select">kevin</p></div>
Live
x
/* 比較以空格相連和以「>」相連的差別 */#father .select { color: green;}#father > .select { background-color: orange;}/* 分辨各tag層級 */div { border:black 3px solid;}div > * { margin-left: 10px;}
Live
xxxxxxxxxx13
$("#father > .select").click(function () { alert("click");});// jquery 可以使用 .children() 來選取下一層後的所有元素$("#mother").children().click(function(){ alert('children()');})// 指定元素下一層的所有指定元素// $("#mother").children(".select").click(function(){// alert('children(".select")');// })
External CSS
This Pen doesn't use any external CSS resources.