Live
<p class="select">father的大哥或大姐</p><div id="father">father <p id="john">john</p> <p id="joy" class="nextAll">joy (john的弟弟或妹妹)</p> <p id="betty">betty (joy的弟弟或妹妹)</p> <p id="tom" class="nextAll">tom (joy的弟弟或妹妹)</p></div><p class="select" id="first">father的大弟或大妹</p><p id="second">father的二弟或二妹</p><p class="select" id="second">father的三弟或三妹</p>
Live
x
#father ~ .select { background-color: orange;}/* 分辨各tag層級 */div { border:black 3px solid;}div > * { margin-left: 10px;}
Live
xxxxxxxxxx13
$("#father ~ .select").click(function () { alert("click");});// jquery 可以使用 .nextAll() 來抓同層後的所有指定元素$("#john").nextAll().click(function(){ alert('nextAll');})// 指定同層後的所有指定元素// $("#john").nextAll(".nextAll").click(function(){// alert('nextAll(".nextAll")');// })
External CSS
This Pen doesn't use any external CSS resources.