Selector-descendant elements, child elements, neighboring elements, sibling elements

CSS, jquery selector syntax are similar, because of the use of a few, some selectors are often confused or forgotten, so here to understand the record under:

1. Descendant element Selector ( ancestor descendant ), child element selector ( parent > Children)

The same HTML code:

< form >    <  name= "Son">    <fieldset>        <  name= "grandson">    </fieldset  ></form>

Descendant selector: . UL Li , can be selected to get descendants of descendant elements: [ <input name= "Son">, < input name = "grandson" >]

Child element selector: . UL > Li , can get elements: [ <input name= "Son" >]

2. Adjacent element selector ( prev + next ), sibling element ( prev ~ siblings )

The same HTML code

<inputname= "N1" /><label>Name:</label><inputname= "N2" /><inputname= "N3" /><fieldset>    <label>Child Label:</label>    <inputname= "N4" /></fieldset><inputname= "N5" />

Adjacent element selector: label + input will be selected to: n2,n4

Peer element selector: Label ~ Input will be selected to: N2, N3, N4, N5 , we can notice whether the neighbor or the sibling elements, N1 are not selected, you can know that the neighboring, peers are backward selection Select the element.

Selector-descendant elements, child elements, neighboring elements, sibling elements