前端(选择器)

前端(选择器)_第1张图片

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.兄弟元素

拥有相同父元素的元素。

你可能感兴趣的:(前端(选择器))