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

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 都是没有被选择到的，可以得知相邻、同辈都是向后选择元素的。

转载于:https://www.cnblogs.com/ourh/p/4933602.html