选择器老是写错：CSS Diner 摆盘子练半小时
选择器写错了样式就不生效，只能一行行试着排除，这是初学样式最烦的事。这个游戏把选择器练习做成摆盘子：界面上放着一堆盘子和盘里的食物，按要求用选择器把指定的那几个挑出来，写对了立刻看到高亮变化，写错了也能看出是哪一层没匹配上。
它解决什么问题
后代选择器和子选择器长得很像，凭感觉写，不生效就来回试。
伪类、属性选择器这些不常用的写法，看过就忘，要用时想不起来。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 即时反馈 | 写下选择器立刻看到哪些元素被选中 |
| 由浅入深 | 从基础选择器讲到伪类与属性匹配 |
| 靶子明确 | 每关给出具体要求，不用自己设计练习场景 |
| 多语言界面 | 提供多种语言，可在页面里切换 |
| 开源可部署 | 代码公开，可自行搭建或参与翻译 |
| 单关很短 | 每关几分钟，碎片时间也能推进 |
通关之后要回到真页面用一遍
玩的时候有个坑：为了过关容易靠试错硬凑，最后记住了答案却没记住规则。建议每关先在心里把要求翻译成一句话，比如选中的是列表里的第一个元素，再动手写；写完对照一下自己写的和想的对不对。碰到一直过不去的关卡，把可用选择器逐个试一遍，看高亮范围怎么变，这个过程本身就是理解。
它只练选择器这一件事，不涉及盒模型、层叠和布局，别指望通关就会写页面。真正该做的下一步是打开一个现成页面，用开发者工具里的控制台自己写选择器去挑元素，看挑出来的和预期一不一样。能凭经验写出准确又不过度具体的选择器，页面后期维护会轻松很多，改起来也不用担心牵一发动全身。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Grid Garden | 开源免费 | 同类闯关游戏，练的是网格布局属性 |
| Flexbox Froggy | 开源免费 | 同为样式闯关游戏，主题是弹性布局 |
| MDN Web Docs | 开源免费 | 选择器的完整语法与兼容说明，配合游戏查得更准 |
谁适合用
- 刚学样式、选择器总是写不准的新手
- 需要给初学者讲选择器基础的前端讲师
- 想快速回忆伪类与属性选择器写法的人
怎么开始
- 打开游戏页面，在页面上切换到中文界面。
- 读第一关要求，先想清楚要匹配哪一类元素。
- 在编辑框里写选择器，看高亮范围是否符合预期。
- 过关后继续下一关，卡住时逐个尝试可用写法。
- 全部通关后，到真实页面用开发者工具再练一遍。
常见问题
要注册吗？
不需要，打开网页就能玩，进度是否记录以站点实际为准。
有中文吗？
提供多种语言，可在页面里切换，具体语种以站点实际为准。
通关就算学会了吗？
能记住常见写法，但真实项目里还要看结构复杂度和维护成本。
手机上能玩吗？
手机浏览器也能打开，但要键盘输入选择器，电脑上练更顺手。
授权与合规
项目以开源方式发布在 GitHub 上，网页版免费游玩，也提供多种语言。 官网：flukeout.github.io。
继续找同类资源
这条属于「学习资料」栏目，同栏目还有更多可直接使用的免费资源，可以在 学习资料全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
资源信息
界面语言
多语言
授权方式
开源免费
适用平台
Web
获取方式
直链下载
资源更新
2026-09-20
页面更新
2026-09-20
↓ 获取资源
点击按钮直接前往资源页面。
