【CSS选择器小游戏】很有趣，能全部通关？那你这些知识点很扎实（下）

翼同学
983 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

1️⃣前言

上一篇笔记记录了这个选择器小游戏的前16个，今天把剩下的16个补充完，

下面是游戏链接：

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

2️⃣游戏

☺游戏17

要求：

游戏17.gif

  • 要求用:last-child伪类来选择页面中的apple和pickle
<!--  HTML  -->
<div class="table">
    <plate id="fancy">
        <apple class="small" />
    </plate>
    <plate />
    <plate>
        <orange class="small" />
        <orange />
    </plate>
    <pickle class="small" />
</div>

解决：

/* CSS */
apple:last-child, pickle:last-child {}

记录：

  • 复习伪类：
  • E:last-child { }用于匹配父元素中的最后一个子元素E。

☺游戏18

要求：

游戏18.gif

  • 选择页面中的第三个plate，要求使用伪类nth-child(n)
<!--  HTML  -->
<div class="table">
    <plate />
    <plate />
    <plate />
    <plate id="fancy" />
</div>

解决：

/* CSS */
plate:nth-child(3) {}

记录：

  • 复习伪类：
  • E:nth-child(n)用于匹配父元素的第n个子元素E。

☺游戏19

要求：

游戏19.gif

  • 要求使用:nth-last-child(A)伪类来选择第一个bento
<!--  HTML  -->
<div class="table">
    <plate />
    <bento />
    <plate>
        <orange />
        <orange />
        <orange />
    </plate>
    <bento />
</div>

解决：

/* CSS */
bento:nth-last-child(3) {}

记录：

  • 复习伪类:nth-last-child()
  • 选择器E:nth-last-child() { }用于匹配父元素的倒数第n个子元素E

☺游戏20

要求：

游戏20.gif

  • 选择页面
<!--  HTML  -->
<div class="table">
    <orange class="small" />
    <apple />
    <apple class="small" />
    <apple />
    <apple class="small" />
    <plate>
        <orange class="small" />
        <orange />
    </plate>
</div>

解决：

/* CSS */
apple:first-of-type {}

记录：

  • 复习伪类:first-of-type
  • 选择器E:first-of-type { }用于匹配同类型中的第一个同级兄弟元素E

☺游戏21

要求：

游戏21.gif

  • 选择页面排列中偶数的plate，要求使用伪类:nth-child()
<!--  HTML  -->
<div class="table">
    <plate />
    <plate />
    <plate />
    <plate />
    <plate id="fancy" />
    <plate />
</div>

解决：

/* CSS */
plate:nth-child(even) {}

记录：

  • 复习使用伪类:nth-child()
  • :nth-child()伪类允许使用一些关键字，比如：odd, even
  • 其中关键字odd代表奇数，even代表偶数

☺游戏22

要求：

游戏22.gif

  • 要求使用:nth-of-type伪类，从第三个plate开始，每隔两个plate匹配一次
<!--  HTML  -->
<div class="table">
    <plate />
    <plate>
        <pickle class="small" />
    </plate>
    <plate>
        <apple class="small" />
    </plate>
    <plate />
    <plate>
        <apple />
    </plate>
    <plate />
</div>

解决：

/* CSS */
plate:nth-of-type(2n+3) {}

记录：

  • 复习伪类:nth-of-type
  • :nth-of-type()伪类允许使用一个乘法因子(n)来作为换算方式；
  • 比如，(2n)表示偶数，而(2n+1)则是奇数

☺游戏23

要求：

游戏23.gif

  • 要求使用:only-of-type，匹配页面中在plate内的apple
<!--  HTML  -->
<div class="table">
    <plate id="fancy">
        <apple class="small" />
        <apple />
    </plate>
    <plate>
        <apple class="small" />
    </plate>
    <plate>
        <pickle />
    </plate>
</div>

解决：

/* CSS */
plate apple:only-of-type {}

记录：

  • 复习伪类:only-of-type
  • E:only-of-type 用于匹配同类型中的唯一的一个同级兄弟元素E。

☺游戏24

要求：

游戏24.gif

  • 选择页面中最后一个orange和apple，要求使用伪类:last-of-type
<!--  HTML  -->
<div class="table">
    <orange class="small" />
    <orange class="small" />
    <pickle />
    <pickle />
    <apple class="small" />
    <apple class="small" />
</div>

解决：

/* CSS */
orange:last-of-type, apple:last-of-type {}

记录：

  • 复习伪类:last-of-type
  • 选择器E:last-of-type { }用于匹配同类型中的最后一个同级兄弟元素E。

☺游戏25

要求：

游戏25.gif

  • 选择页面中无内容的bento，要求使用伪类:empty
<!--  HTML  -->
div class="table">
    <bento />
    <bento>
        <pickle class="small" />
    </bento>
    <plate />
    <bento />
</div>

解决：

/* CSS */
bento:empty {}

记录：

  • 复习伪类:empty
  • 选择器E:empty 用于匹配没有任何子元素（包括text节点）的元素E。

☺游戏26

要求：

游戏26.gif

  • 选择页面中的big apple，要求使用伪类:not()
<!--  HTML  -->
<div class="table">
    <plate id="fancy">
        <apple class="small" />
    </plate>
    <plate>
        <apple />
    </plate>
    <apple />
    <plate>
        <orange class="small" />
    </plate>
    <pickle class="small" />
</div>

解决：

/* CSS */
apple:not(.small) {}

记录：

  • 复习伪类:not()
  • E:not(s)选择器用于匹配不含有s选择符的元素E。

☺游戏27

要求：

游戏27.gif

  • 选择页面中所有具有for属性的元素，要求使用属性选择器。
<!--  HTML  -->
<div class="table">
    <bento>
        <apple class="small" />
    </bento>
    <apple for="Ethan" />
    <plate for="Alice">
        <pickle />
    </plate>
    <bento for="Clara">
        <orange />
    </bento>
    <pickle />
</div>

解决：

/* CSS */
[for] {}

记录：

  • 复习属性选择器
  • 选择器[att] { } 用于匹配所有具有att属性的元素

☺游戏28

要求：

游戏28.gif

  • 选择页面具有for属性的plate，要求使用属性选择器
<!--  HTML  -->
<div class="table">
    <plate for="Sarah">
        <pickle />
    </plate>
    <plate for="Luke">
        <apple />
    </plate>
    <plate />
    <bento for="Steve">
        <orange />
    </bento>
</div>

解决：

/* CSS */
plate[for] {}

记录：

  • 复习属性选择器
  • E[att] { } 用于匹配具有att属性的E元素

☺游戏29

要求：

游戏29.gif

  • 选择页面名字为Vitaly的食物
<!--  HTML  -->
<div class="table">
    <apple for="Alexei" />
    <bento for="Albina">
        <apple />
    </bento>
    <bento for="Vitaly">
        <orange />
    </bento>
    <pickle />
</div>

解决：

/* CSS */
[for="Vitaly"] {}

记录：

  • 复习属性选择器
  • 选择器E[att="val"] { } 用于匹配具有att属性且属性值等于val的E元素

☺游戏30

要求：

游戏30.gif

  • 选择页面中以Sa开头的食物。
<!--  HTML  -->
    <div class="table">
    <plate for="Sam">
        <pickle />
    </plate>
    <bento for="Sarah">
        <apple class="small" />
    </bento>
    <bento for="Mary">
        <orange />
    </bento>
</div>

解决：

/* CSS */
[for^="Sa"] {}

记录：

  • 复习属性选择器
  • E[att^="val"] { } 选择器用于匹配具有att属性且属性值为以val开头的字符串的E元素。

☺游戏31

要求：

游戏31.gif

  • 选择页面中以ato结尾的食物。
<!--  HTML  -->
<div class="table">
    <apple class="small" />
    <bento for="Hayato">
        <pickle />
    </bento>
    <apple for="Ryota" />
    <plate for="Minato">
        <orange />
    </plate>
    <pickle class="small" />
</div>

解决：

/* CSS */
[for$="ato"] {}

记录：

  • 复习属性选择器
  • E[att$="val"] 选择器用于匹配att属性且属性值为以val结尾的字符串的E元素

☺游戏32

要求：

游戏32.gif

  • 选择页面中名字包含obb的食物。
<!--  HTML  -->
<div class="table">
    <bento for="Robbie">
        <apple />
    </bento>
    <bento for="Timmy">
        <pickle />
    </bento>
    <bento for="Bobby">
        <orange />
    </bento>
</div>

解决：

/* CSS */
[for*="obb"] {}

记录：

  • 复习属性选择器
  • E[att*="val"] 选择器用于匹配具有att属性且属性值为包含val的字符串的E元素

3️⃣写在最后

好了，今天的笔记就记到这里。相信这个小游戏通关后，你对CSS选择器的知识点又复习了一遍，有什么问题欢迎到评论区一起讨论！我是翼同学，咱们下篇笔记见

avatar
文章
阅读
粉丝