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.兄弟元素
拥有相同父元素的元素。