下载地址:https://github.com/flukeout/css-diner 通过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"]选择器匹配元素属性值包含指定值的元素