css中连锁餐厅的例子,CSS选择器餐厅练习

第一关：元素选择器

plate

plate元素

select the plates

第二关：元素选择器

bento

bento元素

select the bento plate

第三关：ID选择器

#fancy

id为fancy的元素

select the fancy plate

第四关：后代选择器

plate apple

plate祖先元素下的后代元素apple

select the apple on the plate

第五关：结合后代和ID选择器

#fancy pickle

id为fancy的祖先元素下的pickle元素

select the pickle on the fancy plate

第六关：类选择器

.small

类名为small的元素

select the small apple

第七关：结合类选择器

orange.small

同时满足类名为small且为orange的元素

select the small orange

第八关：后代选择器和类选择器

bento orange.small

bento父元素下面类名为small的orange的子元素

select the small orange in the bentos

第九关：逗号选择器

plate,bento

在div元素中的plate和bento元素

selector all the plates and bentos

第十关：通配选择器

*

在主体中的所用元素

select all things

第十一关：结合通用选择器

plate *

plate父元素的所有子元素

select everyting on a plate

第十二关：相邻兄弟选择器

plate+apple

plate元素的后一个元素

selelc evey apple that's next to a apple

第十三关：通用兄弟选择器

bento~pickle

bento元素后的多个pickle元素

select the pickle beside the bento

第十四关：后代选择器

plate>apple

plate父元素下面的apple子元素

select the apple directly on a plate

第十五关：:first-child

orange:first-child

第一个orange元素

select the top orange

第十六关：:only-child

plate :only-child

选择plate中唯一种类的子元素

select the apple and the pickle on the plate

注意：only-child 选择器匹配属于父元素中唯一子元素的元素

第十七关：:last-child

#fancy :last-child,pickle:last-child

select the small apple and the pickle

选择id为fancy的元素最后一个子元素和pickle元素的最后一个元素

第十八关：:nth-child

plate:nth-child(3)

select the 3rd plate

选择第三个plate元素

第十九关：:nth-last-child(a)

bento:nth-last-child(3)

倒数从第三个开始的bento元素

select the 1st bento

第二十关：:first-of-type

apple:first-of-type

第一个apple元素

select first apple

第二十一关：:nth-of-type

plate:nth-of-type(even)

选择所有偶数个的plate

select all even plates

第二十二关：:nth-of-type(An+B)

plate:nth-of-type(2n+3)

从第三个元素起，每隔一个选择一个plate元素

select evey 2nd plate，starting from the 3rd

第二十三关：:only-of-type

plate apple:only-of-type

plate元素中仅有一个的apple元素

select the apple on the middle plate

注意：only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

第二十四关：:last-of-type

orange:last-of-type,apple:last-of-type

选择最后一个orange元素和最后一个apple元素

select the last apple and orange

第二十五关：:empty

bento:empty

select the empty bentos

注意：:empty选择器匹配没有子元素(包括文本节点空格)的每个元素

第二十六关：:not(X)

apple:not(.small)

选择类名不为small的apple元素

select the big apple

注意：:not()选择器匹配没和元素是不是指定的元素/选择器

第二十七关：[attribute] 属性选择器

[for]

有for属性的所有元素

select the items for someone

注意：[attribute] 属性选择器选择有相应属性的元素

第二十八关：A[attribute] 属性选择器

plate[for]

有for属性的plate元素

select the plates for someone

第二十九关：[attribute='value']

[for='Vitaly']

选择for属性值为Vitaly的元素

select Vitaly‘s meal

注意：[attribute='value']属性选择器选择属性为指定值的元素

第三十关：[attribute^='value']

[for^='Sa']

for属性值以Sa开始的所有元素

select the items for names that start width ’Sa'

注意：[attribute^='value'] 属性选择器选择所有属性值以指定字母开始的元素

第三十一关：[attribute$="value"]

[for$='ato']

选择for属性值以ato结尾的元素

select the items for names that end width ‘ato'

注意：[attribute$="value"] 属性选择器后面的后几个字母需要以 value结尾

第三十二关：[attribute*="value"]

[for*='obb']

选择for属性值中包含obb的元素

select the meals for names that contain ’obb'

注意：[attribute*="value"]选择器匹配元素属性值包含指定值的元素