HTML & CSS » CSS Diner – 边学CSS选择器，边享受晚餐

CSS Diner – 边学CSS选择器，边享受晚餐

发表于: HTML & CSS. 评论 (4)
Sponsor

今天我们将介绍一个用来学习CSS选择器的游戏 – CSS Diner(CSS晚餐)，既可以学习CSS又可以娱乐，过程十分有趣。

css-diner

在这个游戏中，你可以学习26个CSS选择器的用法（含CSS3），从简单到高级，比如子元素选择器、后代选择器、伪元素选择器等等，如果你玩完这个Css Diner，我想你对CSS的选择器已经了解差不多了。比如下面一起来看看如何玩法。

游戏玩法

如下图，这游戏要我们选择画面中会”动”的元素，下图是两个碟子，哪么我们就选择碟子了。

css-diner-a1

碟子的选择器为plate，输入后回车，如果答案正确就会跳到下一题，怎样？玩法就是这么简单。

css-diner-a2

 

下图为第五题，选择在“动”的食物，是中间哪个黄瓜，所以我们输入“#fancy pickle” (答对了耶^_^)

css-diner-b

 

切换题目

另外你也可以通过这里来选择不同的题目，建议还是每条都做完吧，不要作弊哦！

css-diner-change

胜利

如果你通过所有测试，哪么会显示以下画面，成为CSS大神！

css-diner-god

如果你有什么不懂的地方，欢迎在下方留言处提问，让大家一起帮助你吧！

传送门：CSS Diner
推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

+ 添加评论4 Responses to “CSS Diner – 边学CSS选择器，边享受晚餐”

  1. 马世界 - 回复
    2016 年 07 月 26 日 下午 6:08

    第十二个怎么选择呢

    • 陶丽 -
      2016 年 08 月 16 日 上午 11:28

      用nth-child()来选择

  2. 悟道 - 回复
    2014 年 07 月 23 日 下午 11:18

    不错不错

  3. mylearningway - 回复
    2014 年 03 月 26 日 下午 4:43

    学习CSS选择器的游戏 – CSS Diner(CSS晚餐)，既可以学习CSS又可以娱乐，过程十分有趣。


{ 发表评论 }