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