选择器之-后代元素、子元素、相邻元素、同辈元素

css、jquery选择器的语法都是类似的，由于用的不多，有些选择器经常会混淆或者忘记，所以在这里再理解的记录下：

1. 后代元素选择器( ancestor descendant )、子元素选择器( parent > child )

同样的html代码：

<form>
<input name="son">
<fieldset>
<input name="grandson">
</fieldset>
</form>

后代选择器： .ul li ,可以选中得到后代子孙元素: [ <input name="son">, <input name="grandson">]

子元素选择器： .ul > li ,可以取得元素： [ <input name="son">]

2. 相邻元素选择器( prev + next )、同辈元素( prev ~ siblings )

同样的html代码

<input name="n1" />
<label>
Name:
</label>
<input name="n2" />
<input name="n3" />
<fieldset>
<label>
child label:
</label>
<input name="n4" />
</fieldset>
<input name="n5" />

相邻元素选择器: label + input 将选择到： n2,n4

同辈元素选择器: label ~ input 将选择到： n2, n3, n4, n5 ,我们可以注意到不管是取相邻还是取同辈元素， n1 都是没有被选择到的，可以得知相邻、同辈都是向后选择元素的。