1️⃣前言

前几天刚学完CSS选择器，有位大佬分享了一个有关不同选择器用法的小游戏。将这些小游戏通关后，也顺便复习巩固了各类选择器的用法。感觉挺不错的，所以就记录一下。

下面是游戏来源：

• 【游戏链接 | 点击即可前往】

---

2️⃣游戏

☺游戏1

要求：

• 选择页面中所有的<plate>标签

<!--  HTML  -->
<div class="table">
    <plate />
    <plate />
</div>

解决：

/* CSS */
plate {}

记录：

• 使用标签选择器，这是很基础的一种选择器，用于选择页面中所有指定的元素

---

☺游戏2

要求：

• 选择页面中所有的<bento />标签

<!--  HTML  -->
<div class="table">
    <bento />
    <plate />
    <bento />
</div>

解决：

/* CSS */
bento {}

记录：

• 使用标签选择器，这是很基础的一种选择器，用于选择页面中所有指定的元素

---

☺游戏3

要求：

• 选择页面中fancy plate（也就是选择有id属性的plate）

<!--  HTML  -->
<div class="table">
    <plate id="fancy" />
    <plate />
    <bento />
</div>

解决：

/* CSS */
#fancy {}

记录：

• 使用 ID 选择器，根据元素的id属性中的内容匹配元素

---

☺游戏4

要求：

• 选择页面位于<plate>内层中的<apple>

<!--  HTML  -->
<div class="table">
    <bento />
    <plate>
        <apple />
    </plate>
    <apple />
</div>

解决：

/* CSS */
plate apple {}

记录：

• 当标签有嵌套关系时，内层标签就是外层标签的后代。我们通过后代选择器来可以选择标签内层中的子元素。

---

☺游戏5

要求：

• 选择页面中处于fancy plate下的pickle

<!--  HTML  -->
<div class="table">
    <bento>
        <orange />
    </bento>
    <plate id="fancy">
        <pickle />
    </plate>
    <plate>
        <pickle />
    </plate>
</div>

解决：

/* CSS */
#fancy pickle {}

记录：

• 使用后代选择器，选择带有id属性为fancy标签的后代元素pickle

---

☺游戏6

要求：

• 选择页面中具有class属性为small的元素apple

<!--  HTML  -->
<div class="table">
    <apple />
    <apple class="small" />
    <plate>
        <apple class="small" />
    </plate>
    <plate />
</div>

解决：

.small {}

记录：

• 使用类选择器，由于class属性可以指定一个类名，我们利用类选择器选择若干个元素

---

☺游戏7

要求：

• 选择页面中具有class属性为small的元素orange

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

解决：

/* CSS */
orange.small {}

记录：

• element.class选择器用于选择类名为class的element元素。

---

☺游戏8

要求：

• 选择页面<bento>标签内的具有class属性值为small的<orange>

<!--  HTML  -->
<div class="table">
    <bento>
        <orange />
    </bento>
    <orange class="small" />
    <bento>
        <orange class="small" />
    </bento>
    <bento>
        <apple class="small" />
    </bento>
    <bento>
        <orange class="small" />
    </bento>
</div>

解决：

/* CSS */
bento orange.small {}

记录：

• 使用后代选择器以及属性选择器相结合

---

☺游戏9

要求：

• 选择页面中所有<plate>和<bento>

<!--  HTML  -->
<div class="table">
    <pickle class="small" />
    <pickle />
    <plate>
        <pickle />
    </plate>
    <bento>
        <pickle />
    </bento>
    <plate>
        <pickle />
    </plate>
    <pickle />
    <pickle class="small" />
</div>

解决：

/* CSS */
plate, bento {}

记录：

• 使用并集选择器，也就是用逗号将各个选择器组合起来，方便设置同一样式。

---

☺游戏10

要求：

• 选择页面中所有的元素

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

解决：

/* CSS */
* {}

记录：

• 使用通配符选择器，用于选择文档中所有的元素

---

☺游戏11

要求：

• 选择页面<plate>内的所有元素（只要是<plate>内部嵌套的）

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

解决：

/* CSS */
plate * {}

记录：

• 使用element * {}可以选择element元素内部嵌套的所有元素

---

☺游戏12

要求：

• 选择页面中所有与<plate>相邻的<apple>元素

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

解决：

/* CSS */
plate+apple {}

记录：

• 使用相邻兄弟选择器元素1+元素2 { }，可选择紧接在指定元素1之后的元素2，且二者有相同父元素。

---

☺游戏13

要求：

• 选择页面中所有和bento相邻的pickle元素

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

解决：

/* CSS */
bento~pickle {}

记录：

• 使用通用兄弟选择器元素1~元素2 { }，用于选择指定元素1之后的所有同级元素2。

---

☺游戏14

要求：

• 选择页面中所有在plate上的apple

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

解决：

/* CSS */
plate>apple { }

记录：

• 使用子元素选择器元素1>元素2 { }，用于匹配距离元素1最近的一级子元素2.

---

☺游戏15

要求：

• 选择页面中在plate上的所有orange

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

解决：

/* CSS */
plate orange:first-child {}

记录：

• 复习使用first-child伪类，举个例子，p:first-child会匹配作为另外某个元素第一个子元素的所有<p>元素。

---

☺游戏16

要求：

• 选择页面中所有处于plate上的apple和pickle

<!--  HTML  -->
<div class="table">
    <plate>
        <apple />
    </plate>
    <plate>
        <pickle />
    </plate>
    <bento>
        <pickle />
    </bento>
    <plate>
        <orange class="small" />
        <orange />
    </plate>
    <pickle class="small" />
</div>

解决：

/* CSS */
plate apple:only-child,
plate pickle:only-child {}

记录：

• 复习:only-child伪类和并集选择器，:only-child用于匹配属于其父元素的唯一子元素的每个元素。

---

3️⃣写在最后

好了，今天的笔记就记到这里。剩下另外16道小游戏等明天再记录。