【CSS】能全部通关？那你这些知识点都巩固了（附上游戏攻略...）

翼同学I 2023-03-28 原文

(目录)

1️⃣前言

大家好，我是翼同学。

前几天刚学完CSS选择器，有位大佬分享了一个有关CSS选择器用法的小游戏，共32关，如果你全都通关了，那么你的选择器算是初步入门了。

下面是游戏链接：

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

欢度国庆，在游戏的同时，也能巩固知识点，一举两得！快来通关。

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用于匹配属于其父元素的唯一子元素的每个元素。==

关卡 17

要求：

==要求用: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

要求：

选择页面中的第三个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

要求：

要求使用: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

要求：

选择页面中第一个apple，要求使用伪类:first-of-type

<!--  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

要求：

选择页面排列中偶数的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

要求：

要求使用: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

要求：

要求使用: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

要求：

选择页面中最后一个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

要求：

选择页面中无内容的bento，要求使用伪类:empty

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

解决：

/* CSS */
bento:empty {}

记录：

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

关卡26

要求：

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

要求：

选择页面中具有特定项元素，要求使用属性选择器。

<!--  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

要求：

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

要求：

选择页面名字为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

要求：

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

要求：

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

要求：

选择页面中名字包含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️⃣最后

好了，今天的分享就到这里。最后，祝大家国庆快乐！

知识点通关 code strong quot css html 选择器前端Html/CSS 前端开发在51CTO的第一篇博文

有关【CSS】能全部通关？那你这些知识点都巩固了（附上游戏攻略...）的更多相关文章

ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby - 我需要从 facebook 游戏中抓取数据——使用 ruby - 2
修改(澄清问题)我已经花了几天时间试图弄清楚如何从Facebook游戏中抓取特定信息；但是，我遇到了一堵又一堵砖墙。据我所知，主要问题如下。我可以使用Chrome的检查元素工具手动查找我需要的html-它似乎位于iframe中。但是，当我尝试抓取该iframe时，它是空的(属性除外):如果我使用浏览器的“查看页面源代码”工具，这与我看到的输出相同。我不明白为什么我看不到iframe中的数据。答案不是它是由AJAX之后添加的。(我知道这既是因为“查看页面源代码”可以读取Ajax添加的数据，也是因为我有b/c我一直等到我可以看到数据页面之后才抓取它，但它仍然不存在)。发生这种情况是因为
ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
ruby-on-rails - Rails - 理解 application.js 和 application.css - 2
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2
我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30
ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？
python - Ruby 或 Python 的 3d 游戏引擎？ - 2
关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion是否有适用于这些的3d游戏引擎？
css - rails 萨斯 : variables are not passed with @import - 2
我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen
css - Jekyll 和自定义 CSS - 2
有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

【CSS】能全部通关？那你这些知识点都巩固了（附上游戏攻略...）

1️⃣前言

2️⃣游戏

3️⃣最后

有关【CSS】能全部通关？那你这些知识点都巩固了（附上游戏攻略...）的更多相关文章

随机推荐