CSS餐厅小游戏练习1~32关（附答案和链接）

前言：CSS3众多基础常见的选择器都可以小游戏中学习，每天刷一遍，辅助记忆，做好熟练运用CSS3的第一步。

---

小游戏链接：CSS3餐厅练习

玩法：利用各种选择器和选择器之间的关系选中抖动的物体即可通关

文章目录

• 第一关  Type Selector
• 第二关  Type Selector
• 第三关  ID Selector
• 第四关  Descendant Selector
• 第五关  Combine the Descendant & ID Selectors
• 第六关  Class Selector
• 第七关  Combine the Class Selector
• 第八关  子元素选择器和交集选择器
• 第九关  Comma Combinator
• 第十关  The Universal Selector
• 第十一关  Combine the Universal Selector
• 第十二关  Adjacent Sibling Selector
• 第十三关  General Sibling Selector
• 第十四关  Child Selector
• 第十五关  First Child Pseudo-selector
• 第十六关  Only Child Pseudo-selector
• 第十七关  Last Child Pseudo-selector
• 第十八关  Nth Child Pseudo-selector
• 第十九关  Nth Last Child Selector
• 第二十关  First of Type Selector
• 第二十一关  Nth of Type Selector
• 第二十二关  Nth-of-type Selector with Formula
• 第二十三关  Only of Type Selector
• 第二十四关  Last of Type Selector
• 第二十五关  Empty Selector
• 第二十六关  Negation Pseudo-class
• 第二十七关  Attribute Selector
• 第二十八关  Attribute Selector
• 第二十九关  Attribute Value Selector
• 第三十关  Attribute Starts With Selector
• 第三十一关  Attribute Ends With Selector
• 第三十二关  Attribute Wildcard Selector

---

第一关：Type Selector

参考答案：

1.plate

---

第二关：Type Selector

参考答案： 

1.bento

---

第三关：ID Selector

参考答案： 

1.#fancy

---

第四关：Descendant Selector

参考答案： 

1.plate>apple

---

第五关：Combine the Descendant & ID Selectors

参考答案： 

1.#plate>pickle

---

第六关：Class Selector

参考答案： 

1..small

---

 第七关：Combine the Class Selector

参考答案： 

1.orange.small

---

第八关：子元素选择器和交集选择器

参考答案： 

1.bento>orange.small

---

第九关：Comma Combinator

参考答案： 

1.plate,bento

---

第十关：The Universal Selector

参考答案： 

1.*

---

第十一关：Combine the Universal Selector

参考答案： 

1.plate *(注意这里有空格)

---

第十二关：Adjacent Sibling Selector

参考答案： 

1.plate+apple

---

第十三关：General Sibling Selector

参考答案： 

1.plate~pickle

---

第十四关：Child Selector

参考答案： 

1.plate>apple

---

第十五关：First Child Pseudo-selector

参考答案： 

1.plate orange:first-child

---

第十六关：Only Child Pseudo-selector

参考答案： 

1.plate>:only-child

---

第十七关：Last Child Pseudo-selector

参考答案： 

1..small:last-child 

---

第十八关：Nth Child Pseudo-selector

参考答案： 

1.plate:nth-child(3)

---

第十九关：Nth Last Child Selector

参考答案： 

1.bento:nth-last-child(3)

---

第二十关：First of Type Selector

参考答案： 

1.apple:first-of-type

---

第二十一关：Nth of Type Selector

参考答案： 

1.plate:nth-of-type(2n)

---

第二十二关：Nth-of-type Selector with Formula

参考答案： 

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

---

第二十三关：Only of Type Selector

参考答案： 

1.apple:only-of-type

---

第二十四关：Comma Combinator

参考答案： 

1..small:last-of-type

---

第二十五关：Empty Selector

参考答案： 

1.bento:empty

---

第二十六关：Negation Pseudo-class

参考答案： 

1.apple:not(.small)

---

第二十七关：Attribute Selector

参考答案： 

1.[for]

---

第二十八关：Attribute Selector

参考答案： 

1.plate[for]

---

第二十九关：Attribute Value Selector

参考答案： 

1.bento[for="Vitaly"]

---

第三十关：Attribute Starts With Selector

参考答案： 

1.[for^='S']

---

第三十一关：Attribute Ends With Selector

参考答案： 

1.[for$=o]

---

第三十二关：Attribute Wildcard Selector

参考答案： 

1.[for*='bb']

---

总结

万丈高楼平地起，通过小游戏理解、记忆CSS3选择器不失为一种好的方法。广大友友们多加练习吧！