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
第九关：逗号选择器
css 属性选择器
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"]选择器匹配元素属性值包含指定值的元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。