前端选择器

1.plate（plate元素）

2.bento（bento元素）

3. #fancy ， （id为fancy的元素）

4.plate apple ， （plate祖先元素下的apple后代元素）

5. #fancy pickle ， （id为#fancy的祖先元素下的pickle后代元素）

6..small ， （组为small的元素）

7. orange.small ， （组为small的orange元素）

8.bento>orange.small ， （bento父元素下的组为small的orange子元素）

9. plate,bento,div ， （plate,bento兄弟元素在div元素中）

10. * ， （代表所有元素）

11.plate> ， （plate父元素的所有子元素）

12. plate + apple ， （兄弟元素选择器，plate元素的后一个元素）

13. bento~pickle ， （兄弟元素选择器,bento元素后的多个pickle元素)

14. plate>apple ， (plate父元素下的apple子元素)

15.plate orange:first-child ， (子元素选择器，plate元素下的第一个orange元素)

16. plate :only-child， （所有plate元素下的元素）

17. #fancy :last-child,pickle:last-child ，（id为fancy的元素的最后一个和pickle元素的最后一个）

18. div plate:nth-child(3)，（div元素中的第三个plate元素）

19. div bento :nth-last-child(4) ，（div元素中倒数第四个bento元素）

20.apple:first-of-type （第一个apple元素）

21.plate:nth-of-type(even) ，（所有偶数个的plate元素）

22. plate:nth-of-type(3),plate:nth-of-type(5) ，（plate元素下的第3个和第5个元素）

23. plate apple.small:only-of-type ，（plate元素下满足apple.small元素的唯一一个元素）

24.orange.small:last-of-type,apple.small:last-of-type ，（是orange.samll和apple.small元素的最后一个元素）

25. bento:empty ， （bento元素里没有包括额外元素）

26. apple:not(.small) ，（apple里没有组是.small的元素）

选择器       语法

元素选择器：标签名 { }

类选择器：.className{ }

ID选择器：#id { }

复合选择器：选择器1选择器2{ }

并集选择器：选择器1,选择器2,选择器3 { }

通用选择器：*{ }

后代选择器�：祖先元素 后代元素 后代元素 { }

子元素选择器：父元素 > 子元素{}

标签之间的关系

1.祖先元素

直接或间接包含后代元素的元素。

2.后代元素

直接或间接被祖先元素包含的元素。

3.父元素

直接包含子元素的元素。

4.子元素

–直接被父元素包含的元素。

5.兄弟元素

拥有相同父元素的元素。