CSS Diner

介紹

CSS Diner 是一個輸入選擇器來破關的小遊戲，前一陣子再學習其他技術，一段時間沒使用 css 語法後，就忘記了許多，推薦大家可以來這邊練習。

這邊會記錄我觀念不熟，或是不知道該如何解決關卡!

CSS Diner - Where we feast on CSS Selectors!

1 ~ 10 關

第 4 關

後裔選擇器 Descendant Selector。

要選擇元素裡的元素 A B。要選擇B的話，就需要在A和B中空一格 A B。

以下方程式碼來說，要選擇到<plate>裡面的<apple>，就需要寫 plate apple。

<div class="table">
    <bento />
    <plate>
        <apple />
    </plate>
    <apple />
</div>

第 7 關

Class 選取器，A.className。

舉例來說，ul.important 選取所有 <ul> 帶有 class="important"的元素。

#big.wide 選擇所有元素帶有 id="big" 與class="wide"的。

這關想選取小的橘色，解法為orange.small。

<div class="table">
    <apple />
    <apple class="small" />
    <bento>
        <orange class="small" />
    </bento>
    <plate>
        <orange />
    </plate>
    <plate>
        <orange class="small" />
    </plate>
</div>

第 10 關

全體選擇器，Universal Selector。

使用 *，就可以選到畫面中的所有元素。

第 11 關

全體選擇器，Combine the Universal Selector 。

舉例來說，p * 選擇所有 p 裡面的元素。

ul.fancy *，選擇所有 <ul class="fancy"> 裡面的元素。注意中間要有空格。

以下想選取 <plate> 裡的元素，就可以使用plate *。

<div class="table">
    <plate id="fancy">
        <orange class="small" />
    </plate>
    <plate>
        <pickle />
    </plate>
    <apple class="small" />
    <plate>
        <apple />
    </plate>
</div>

第 12 關 +

Adjacent Sibling Selector，+

舉例來說，這邊想選取所有在 plate 旁邊的 apple，這時候就可以用到 sibling 選擇器，選到該元素的下一個。

plate + apple，選到所有 plate 後面的 apple 。

<div class="table">
    <bento>
    <apple class="small" />
    </bento>
    <plate />
    <apple class="small" />
    <plate />
    <apple />
    <apple class="small" />
    <apple class="small" />
</div>

第 13 關 ~

General Sibling Selector，~

這邊想要選到 pickle，所以在可以寫成 bento ~ pickle。

就可以選到，在 bento 後面的所有 pickle。

<div class="table">
    <pickle />
    <bento>
    <orange class="small" />
    </bento>
    <pickle class="small" />
    <pickle />
    <plate>
    <pickle />
    </plate>
    <plate>
    <pickle class="small" />
    </plate>
</div>

第 15 關 :first-child

這邊要注意的是使用first-child標籤的時候，在的層級就是標籤的同一層。

像是這裡要選擇到第一個orange，就要寫orange:first-child。

以往我都會寫成 plate:first-child，要特別注意。

<div class="table">
    <bento />
    <plate />
    <plate>
        <orange />
        <orange />
        <orange />
    </plate>
    <pickle class="small" />
</div>

第 16 關 :only-child

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

第 17 關 :last-child

.small:last-child

第 18 關 :nth-child

plate:nth-child(3)

第 19 關 :nth-last-child

bento:nth-last-child(3)

21 ~ 30 關

第 21 關 :only-child

plate:nth-of-type(even)

第 23 關

plate apple:only-of-type (選取plate裡面有唯一apple的標籤)

第 24 關

orange:last-of-type,apple:last-of-type (orange和apple標籤的最後一個數值)

第 25 關

bento:empty (裡面值為空)

第 26 關

apple:not(.small) (選取所有不包括.small的apple)

第 27 關

apple:not(.small) (選取所有不包括.small的apple)

第 28 關

plate[for]

第 29 關

bento[for=”Vitaly”]

30 ~ 32 關

第 30 關

[for^=”Sa”]

第 31 關

[for$=”ato”]

第 32 關

bento[for*=”obb”]