likes
comments
collection

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

作者站长头像
站长
· 阅读数 41

1️⃣前言

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

下面是游戏来源:


2️⃣游戏

☺游戏1

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

要求:

  • 选择页面中所有的<plate>标签
<!--  HTML  -->
<div class="table">
    <plate />
    <plate />
</div>

解决:

/* CSS */
plate {}

记录:

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

☺游戏2

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

要求:

  • 选择页面中所有的<bento />标签
<!--  HTML  -->
<div class="table">
    <bento />
    <plate />
    <bento />
</div>

解决:

/* CSS */
bento {}

记录:

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

☺游戏3

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

要求:

  • 选择页面中fancy plate(也就是选择有id属性的plate)
<!--  HTML  -->
<div class="table">
    <plate id="fancy" />
    <plate />
    <bento />
</div>

解决:

/* CSS */
#fancy {}

记录:

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

☺游戏4

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

要求:

  • 选择页面位于<plate>内层中的<apple>
<!--  HTML  -->
<div class="table">
    <bento />
    <plate>
        <apple />
    </plate>
    <apple />
</div>

解决:

/* CSS */
plate apple {}

记录:

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

☺游戏5

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中处于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

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中具有class属性small的元素apple
<!--  HTML  -->
<div class="table">
    <apple />
    <apple class="small" />
    <plate>
        <apple class="small" />
    </plate>
    <plate />
</div>

解决:

.small {}

记录:

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

☺游戏7

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中具有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选择器用于选择类名为classelement元素。

☺游戏8

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面<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

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中所有<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

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中所有的元素
<!--  HTML  -->
<div class="table">
    <plate id="fancy">
        <orange class="small" />
    </plate>
    <plate>
        <pickle />
    </plate>
    <apple class="small" />
    <plate>
        <apple />
    </plate>
</div>

解决:

/* CSS */
* {}

记录:

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

☺游戏11

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面<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

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中所有与<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

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中所有和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

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中所有在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

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中在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

要求:

【CSS选择器小游戏】全部通关?那你这些知识点很扎实(上)

  • 选择页面中所有处于plate上的applepickle
<!--  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道小游戏等明天再记录。