CSS Diner 攻略

網址在這邊

A…我全打在一起好了…上班無聊邊測邊打…雖然我也全破過了|||
這邊建議一定要自己玩一次,而非照我的答案打,因為這只是一個遊戲
然而現實生活中,你的作品,沒有答案的

01. #=> plate
02. #=> bento #tag
03. #=> #fancy #id
04. #=> plate apple #子代限制
05. #=> #fancy pickle #id+子代限制
06. #=> apple.small #tag + class
07. #=> orange.small #同上
08. #=> bento orange.small #複合使用
09. #=> plate , bento #聯集
10. #=> * #萬用卡
11. #=> plate * #子代全選
12. #=> plate + apple #(+)某個東西在前,選擇之後的一個
13. #=> bento ~ pickle #(~)某個東西在前,選擇之後的N個
14. #=> plate > apple #(>)某個東西為父,選擇第一層的子代
15. #=> plate orange:first-child #第一個孩子
16. #=> plate *:only-child #唯一的孩子(該孩子不能是老爸)
17. #=> #fancy *:last-child , plate + pickle #上面連用
18. #=> plate:nth-child(3) #第N個
19. #=> bento:nth-last-child(4) #倒數第N個
20. #=> apple:first-of-type #該selector(type)的第一個
21. #=> plate:nth-of-type(2n) #跳位的運算(這招非常好用)
22. #=> plate:nth-of-type(2n+3) #同上,初始值
23. #=> plate apple.small:only-of-type #該集合只有這個類型
24. #=> orange:last-of-type , apple:last-of-type #該類型集合的最後一個
25. #=> bento:empty #子集合為空
26. #=> apple:not(.small) #該集合內不為另外一個子集合

…又…快速輕鬆的打破了|||…我討厭沒有東西玩得感覺…

這邊注意一下,這邊很多擴充的用法,舊版的瀏覽器不能使用,不過手機反而應該都可以,所以要考慮一下對象使用的瀏覽器版本就是了,不然就要自己增加class來降級selector的用法(簡稱硬幹…)

JokerCatz您好:
我想請教http://flukeout.github.io/ level16。它的說明介紹下方有個範例,如:
ul li:only-child
寫成: plate apple pickle:only-child (為何這樣寫法不行)
by Charlene

說文解字時間…

這邊選的是左邊白色盤子內的蘋果和小黃瓜(…害我要瞬間打到 16 關 X"DD )

你的語法我多一些文字解釋給你看好了

plate apple pickle:only-child

語意大略等於

plate > apple > pickle:only-child

也就是『盤子下的蘋果下的小黃瓜的只有自身』,css 內空白代表下一層的意思,所以你的語意保證錯誤,再來,:only-child 的意思是此階層內只能有自身,且無任何子孫,所以這題最簡單的答案為

plate :only-child

這樣就好了(因為右邊的橘子有子孫),而以你的思維應該是這樣才是,且也會正確

plate apple:only-child , plate pickle:only-child

用逗號分格,相同的語法重寫,也就是 OR (或) 的寫法,所以語意會變成『盤子下的蘋果只有自身或盤子下的小黃瓜只有自身』

所以不能直接串起來哩,否則都是階層一直串下去的就是