餐厅选择器练习

餐厅选择器练习

网址：http://flukeout.github.io/

1 plate{} 元素选择器
2 bento{} 元素选择器
3 #fancy{} id选择器
4 plate apple{} 后代选择器
5 #fancy pickle{}复合选择器
6 .small{} 类选择器
7 orange.small{} 交集选择器
8 bento orange.small{} 复合选择器
9 plate,bento{} 并集选择器，选择器分组
10 *{} 选择所有，通配选择器
11 plate {} 选择盘子里的所有 通配选择器
12 plate+apple{} 兄弟选择器,选择下一个
13 plate~blento{} 兄弟选择器，选择下面的全部
14 plate>child{} 子元素选择器
15 plate orange:first-child{} 伪类选择器，第一个元素
16 plate :only-child {} 伪类选择器，只有一个子元素，在所有里面计数
17 plate .small:last-child,pickle:last-child{} 伪类选择器，last-child
18 plate:nth-child(3){} 伪类选择器，第几个
19 bento:nth-last-child(3){} 伪类选择器，选择倒着数的第几个
20 apple:first-of-type{} 伪类选择器，只选择apple这种类型的第一个
21 plate:nth-child(even){} 伪类选择器，选择第偶数个
22 plate:nth-child(2n+3){} 伪类选择器，选择第2n+3个
23 plate apple:only-of-type{} 伪类选择器，选择只有一个子元素，在apple里去计数
24 orange:last-of-type,apple:last-child{} 伪类选择器，选择最后一个元素，last-of-type是该类型最后一个，last-child是所有类型中最后一个
25 bento:empty{}伪类选择器，空元素
26 apple:not(.small){} 伪类选择器，not排除
27 [for]{} 属性选择器，选择属性
28 plate[for]{} 属性选择器，选择有属性for的某一元素
29 [for=Vitaly]{} 属性选择器，属性+属性值
30 [for^=Sa]{} 属性选择器，选择前几个字母相同元素
31 [for$=ato]{}属性选择器，选择后几个字母相同元素
32 [for=obb]{} 属性选择器，选择任意位置几个字母相同元素