第1题
代码:
plate
元素选择器直接选择
第2题
代码:
bento
元素选择器直接选择
第3题
代码:
plate#fancy
交集选择器的运用
第4题
代码:
plate apple
后代元素选择器
第5题
代码:
plate#fancy pickle
交集选择器和后代元素选择器的结合
第6题
代码:
div > apple.small,div > plate apple.small
父代选择器与交集选择器的结合
第7题
代码:
bento orange.small,plate orange.small
后代元素选择器与交集选择器的结合
第8题
代码:
bento orange.small
后代元素选择器
第9题
代码:
plate,bento
元素选择器
第10题
代码:
*
通配选择器
第11题
代码:
plate *
plate orange.small, plate pickle, plate apple
通配选择器或交集选择器
第12题
代码:
plate + apple
后一个兄弟元素选择器
第13题
代码:
div > pickle.small,div > pickle.small + pickle
子代元素选择器,交集选择器,后一个兄弟元素选择器
第14题
代码:
plate:nth-child(2) apple
子元素选择器,后代元素选择器的综合使用
第15题
代码:
plate:nth-of-type(2) :first-child
子元素选择器的嵌套使用
第16题
代码:
plate:first-of-type apple, plate:first-of-type + plate pickle.small
子元素选择器,后代元素选择器,后一个后代元素选择器的综合使用
第17题
代码:
plate#fancy apple.small, pickle.small
交集选择器,后代选择器的联合使用
第18题
代码:
plate:nth-of-type(3)
子元素选择器
第19题
代码:
bento:first-of-type
子元素选择器
第20题
代码:
apple:first-of-type
子元素选择器
第21题
代码:
plate:nth-of-type(even)
子元素选择器
第22题
代码:
plate:nth-of-type(3),plate:nth-of-type(5)
子元素选择器
第23题
代码:
plate:nth-of-type(2) apple.small
子元素选择器,后代元素选择器的综合使用
第24题
代码:
orange.small:nth-of-type(2),apple.small:nth-of-type(2)
orange.small:last-of-type,apple.small:last-of-type
子元素选择器
第25题
代码:
bento:not(bento:nth-of-type(2))
子元素选择器,否定伪类选择器的联合使用
第26题
代码:
plate:nth-of-type(2) apple,div > :nth-child(3) #方法逻辑合理
plate:nth-of-type(2) apple,div > apple
div > plate:nth-of-type(2) apple,div > apple
子元素选择器,后代元素选择器,子代元素选择器器
结束语