<!DOCTYPE HTML><HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title></title> <Linkrel= "stylesheet"href= "Imooc.css"type= "Text/css"> <Scriptsrc= "Http://libs.baidu.com/jquery/1.9.1/jquery.js"></Script></Head><Body> <H2>Child selector and descendant selector</H2> <Divclass= "Left"> <Divclass= "Aaron"> <P>The first P element under a div</P> </Div> <Divclass= "Aaron"> <P>The first P element under a div</P> </Div> </Div> <Divclass= "Right"> <Divclass= "Imooc"> <article> <P>The P element under the div under article</P> </article> </Div> <Divclass= "Imooc"> <article> <P>The P element under the div under article</P> </article> </Div> </Div> <Scripttype= "Text/javascript"> //Child selector //$ (' div > P ') Select all DIV elements inside the child element p $("div>p"). CSS ("Border", "1px Groove Red"); </Script> <Scripttype= "Text/javascript"> //descendant Selector //$ (' div p ') select the P element inside all DIV elements $("Div P"). CSS ("Border", "1px Groove Red"); </Script> <H2>Adjacent sibling selector and general Brotherhood selector</H2> <Divclass= "Bottom"> <Div>Sibling node Div, +~ selector cannot be selected forward</Div> <spanclass= "Prev">Selector span Element</span> <Div>Span after the first sibling node Div</Div> <Div>Brother Node Div<Divclass= "small">child element Div</Div> </Div> <span>Sibling node span, not selectable</span> <Div>Brother Node Div</Div> </Div> <Scripttype= "Text/javascript"> //adjacent Sibling selector //Select the first div sibling node that follows Prev $(". prev + div"). CSS ("Border", "3px Groove Blue"); </Script> <Scripttype= "Text/javascript"> //General Neighbor Selector //Select all the div sibling nodes that follow the prev $(". Prev~div"). CSS ("Border", "3px Groove Blue"); </Script></Body></HTML>
The level selector of the jquery selector