CSS选择器练习 -- 餐厅小游戏
餐厅小游戏目录
>>>餐厅小游戏
第一关 Type Selector
Select elements by their type
A
Selects all elements of typeA. Type refers to the type of tag, so<div>,<p>and<ul>are all different element types.
Examples
divselects all<div>elements.
pselects all<p>elements.
参考答案
| plate
第二关 Type Selector
Select elements by their type
A
Selects all elements of typeA. Type refers to the type of tag, so<div>,<p>and<ul>are all different elementtypes.
Examples
divselects all<div>elements.
pselects all<p>elements.
参考答案
| bento
第三关 ID Selector
Select elements with an ID
#id
Selects the element with a specificid. You can also combine the ID selector with the type selector.
Examples
#coolselects any element withid="cool"
ul#longselects<ul id="long>"
参考答案
| #fancy
第四关 Descendant Selector
Select an element inside another element
A B
Selects allBinside ofA.Bis called a descendant because it is inside of another element.
Examples
p strongselects all<strong>elements that are inside of any<p>
#fancy span selects any<span>elements that are inside of the elementwith id="fancy"
参考答案
| plate > apple
第五关 Combine the Descendant & ID Selectors
#id A
You can combine any selector with the descendent selector.
Examples
#cool<span>selects all span elements that are inside of elements withid="cool"
参考答案
| #fancy > pickle
第六关 Class Selector
Select elements by their class
.classname
The class selector selects
all elements with that class attribute. Elements can only have one ID, but many classes.
Examples .
.neatoselects all elements with
class="neato"
参考答案
| .small
第七关 Combine the Class Selector
A.className
You can combine the class selector with other selectors, like the type selector.
Examples
ul.important selects all<ul>elements that haveclass="important"
#big.wide selects all elements withid="big"that also haveclass="wide"
参考答案
| orange.small
第八关 You can do it…
Put your back into it!
Combine what you learned in the last few levels to solve this one!
参考答案
| bento > orange.small
第九关 Comma Combinator
Combine, selectors, with… commas!
A, B
Thanks to Shatner technology, this selects allAandBelements. You can combine any selectors this way, and you can specify more than two.
Examples
p, .fun selects all<p>elements as well as all elements withclass="fun"
a, p, divselects all<a>,<p>and<div>elements
参考答案
| plate,bento
第十关 The Universal Selector
You can select everything!
*
You can select all elements with the universal selector!
Examples
p*selects any element inside all<p>elements.
参考答案
| *
第十一关 Combine the Universal Selector
A *
This selects all elements inside of A.
Examples
p *selects every element inside all<p>elements.
ul.fancy *selects every element inside
all<ul class="fancy">elements.
参考答案
| plate>*, plate>apple,pickle,orange
第十二关 Adjacent Sibling Selector
Select an element that directly follows another element
A + B
This selects allBelements that directly followA. Elements that follow one another are called siblings. They’re on the same level, or depth.In the HTML markup for this level, elements that have the same indentation are siblings.
Examples
p +.intro selects every element withclass="intro"that directly follows a<p>
div + aselects every<a>element that directly follows a<div>
参考答案
| plate+ apple
第十三关 General Sibling Selector
Select elements that follows another element
A ~ B
You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one.
Examples
A ~ Bselects allBthat follow aA
参考答案
| bento ~ pickle
第十四关 Child Selector
Select direct children of an element
A > B
You can select elements that are direct children of other elements. A child element is any element that is nested directly in another element.
Elements that are nested deeper than that are called descendant elements.
Examples
A > Bselects allBthat are a direct childrenA
参考答案
| plate > apple
第十五关 First Child Pseudo-selector
Select a first child element inside of another element
:first-child
You can select the first child element. A child element is any element that is directly nested in another element. You can combine this pseudo-selector with other selectors.
Examples
:first-childselects all first child elements.
p:first-childselects all first child<p>elements.
div p:first-childselects all first child<p>elements that are in adiv.
参考答案
| plate orange:first-child
第十六关 Only Child Pseudo-selector
Select an element that are the only element inside of another one.
:only-child
You can select any element that is the only element inside
of another one.
Examples
span:only-childselects the<span>elements
that are the only child of some other element.
ul li:only-child
selects the only<li>element that are in a<ul>.
参考答案
| plate apple:only-child,plate pickle:only-child
第十七关 Last Child Pseudo-selector
Select the last element inside of another element
:last-child
You can use this selector to select an element that is the last child element inside of another element.
Pro Tip → In cases where there is only one element, that element counts as the first-child, only-child and last-child!
Examples
:last-childselects all last-child elements.
span:last-childselects all last-child<span>elements.
ul li:last-childselects the last li elements inside of any<ul>.
参考答案
| apple:last-child,pickle:last-child
第十八关 Nth Child Pseudo-selector
Select an element by its order in another element
:nth-child(A)
Selects thenth(Ex: 1st, 3rd, 12th etc.) child element in another element.
Examples
:nth-child(8)selects every element that is the 8th child of another element.
div p:nth-child(2)selects the secondpin everydiv
参考答案
| plate:nth-child(2)
第十九关 Nth Last Child Selector
Select an element by its order in another element, counting from the
back :nth-last-child(A)
Selects the children from the bottom of the parent. This is like nth-child, but counting from the back!
Examples
:nth-last-child(2)selects all second-to-last child elements.
参考答案
| bento:nth-last-child(3)
第二十关 First of Type Selector
Select the first element of a specific type
:first-of-type
Selects the first element of that type within another element.
Examples
span:first-of-typeselects the first<span>in any element.
参考答案
| apple:first-of-type
第二十一关 Nth of Type Selector
:nth-of-type(A)
Selects a specific element based on its type and order
in another element - or even or odd instances of that element.
Examples
div:nth-of-type(2)selects the second instance of a div.
.example:nth-of-type(odd)selects all odd instances of a the example class.
参考答案
| plate:nth-of-type(2n)
第二十二关 Nth-of-type Selector with Formula
:nth-of-type(An+B)
The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.
Examples
span:nth-of-type(6n+2)selects every 6th instance of a<span>, starting from (and including) the second instance.
参考答案
| plate:nth-of-type(2n+3)
第二十三关 Only of Type Selector
Select elements that are the only ones of their type within of their parent element
:only-of-type
Selects the only element of its type within another element.
Examples
p span:only-of-typeselects aspanwithin any<p>if it is the only<span>in there.
参考答案
| .small:only-of-type
第二十四关 Last of Type Selector
Select the last element of a specific type
:last-of-type
Selects each last element of that type within another element. Remember type refers
the kind of tag, so<p>and<span>are different types. I wonder if this is how the last dinosaur was selected before it went extinct.
Examples
div:last-of-typeselects the last<div>in every element.
p span:last-of-typeselects the last<span>in every<p>.
参考答案
| .small:last-of-type
第二十五关 Empty Selector
Select elements that don’t have children
:empty
Selects elements that don’t have any other elements inside of them.
Examples
div:emptyselects all empty<div>elements.
参考答案
| bento:empty
第二十六关 Negation Pseudo-class
Select all elements that don’t match the negation selector
:not(X)
You can use this to select all elements that do not match selector"X".
Examples
:not(#fancy)selects all elements that do not haveid="fancy".
div:not(:first-child)selects every<div>that is not a first child.
:not(.big, .medium)selects all elements that do not haveclass="big" orclass="medium".
参考答案
| apple:not(.small)
第二十七关 Attribute Selector
Select all elements that have a specific attribute
[attribute]
Attributes appear inside the opening tag of an element, like this:<span attribute="value">. An attribute does not always have a value, it can be blank!
Examples
a[href]selects all<a>elements that have ahref="anything"attribute.
[type]selects all elements that have atype="anything". attribute
参考答案
| [for]
第二十八关 Attribute Selector
Select all elements that have a specific attribute
A[attribute]
Combine the attribute selector with another selector (like the tag name selector) by adding it to the end.
Examples
[value]selects all elements that have avalue="anything"attribute.
a[href]selects all<a>elements that have ahref="anything"attribute.
input[disabled]selects all<input>elements with thedisabledattribute
参考答案
| plate[for]
第二十九关 Attribute Value Selector
Select all elements that have a specific attribute value
[attribute="value"]
Attribute selectors are case sensitive, each character must match exactly.
Examples
input[type="checkbox"]selects all checkbox input elements.
参考答案
| [for="Vitaly"]
第三十关 Attribute Starts With Selector
Select all elements with an attribute value that starts with specific characters
[attribute^="value"]
Examples
.toy[category^="Swim"]selects elements with classtoyand eithercategory="Swimwearorcategory="Swimming".
参考答案
| [for^="Sa"]
第三十一关 Attribute Ends With Selector
Select all elements with an attribute value that ends with specific characters
[attribute$="value"]
Examples
img[src$=".jpg"]selects all images display a.jpgimage.
参考答案
| [for$="ato"]
第三十二关 Attribute Wildcard Selector
Select all elements with an attribute value that contains specific characters anywhere
[attribute*="value"]
A useful selector if you can identify a common pattern in things like class, href or src attributes.
Examples
img[src*="/thumbnails/"]selects all image elements that show images from the “thumbnails” folder.
[class*="heading"]selects all elements with “heading” in their class,likeclass="main-heading"andclass="sub-heading"
参考答案
| [for*="bb"]
CSS选择器练习 -- 餐厅小游戏相关推荐
- CSS餐厅小游戏练习1~32关（附答案和链接）
前言:CSS3众多基础常见的选择器都可以小游戏中学习,每天刷一遍,辅助记忆,做好熟练运用CSS3的第一步. 小游戏链接:CSS3餐厅练习 玩法:利用各种选择器和选择器之间的关系选中抖动的物体即可通关 ...
- css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
- 利用html css javascript写翻翻乐小游戏
利用html css javascript写翻翻乐小游戏 废话不多说,先看效果 代码放到文章末尾,不想看代码解释的可以直接跳过到后面直接下载 我写这个小游戏的过程 1.准备图片 我在觅元素上找了 ...
- 基于html+JavaScript+css的飞机射击小游戏网页设计与实现
资源下载地址:https://download.csdn.net/download/sheziqiong/86954471 资源下载地址:https://download.csdn.net/downl ...
- html+css+js:坚持30s小游戏
坚持30s小游戏 用到: 弹性运动 拖拽事件 碰撞检测 定时器清除 单对象编程 <!DOCTYPE html> <html lang="en"> <h ...
- 【CSS】CSS餐厅小游戏练习1~32关的参考答案
链接:CSS3餐厅练习 玩法:利用各种选择器选中抖动的物体即可通关 1.Type Selector(元素选择器) 元素选择器 作用:根据标签名来选中指定的元素 语法:标签名{} 例子:p{} h1{} ...
- HTML+CSS+JS实现的小游戏-剪刀石头布
效果 代码 .t1.html <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- css flex布局网页小游戏
一.小青蛙回家(Flexbox Froggy - A game for learning CSS flexbox) 二.弹性盒子防御(Flexbox Defense)
- jquery制作html小游戏,使用css+JQuery制作开心农场小游戏模拟画面
效果如图所示: 代码如下所示: #bg { width: 500px; height: 280px; background-image: url(img/plowland.jpg); backgrou ...
最新文章
- NOIP2010排队接水
- ios wkweb设置图片_iOS WKWebView的使用
- OSChina 周四乱弹 —— 要成立复仇者联盟了，来报名
- ADO.NET数据访问模板整理
- eclipse中maven项目pom文件第一行报错解决方法
- 【今日所得】1.29。。。
- android剪贴板历史,可能是史上最便捷的剪贴板应用 -- Native Clipboard #Android
- Spring Boot电商项目53：订单模块二：【前台：创建订单】接口；（这个接口比较复杂，内容较多）
- 免安装版本的+mysql_MySQL的安装（免安装版本）
- 库存JAVA_Java解决高并发下商品库存更新
- KK凯文.凯利：第一届中国社群领袖峰会演讲实录（全部版）
- android银河城游戏,Endless Memories安卓版
- 计算机科学与技术影视,计算机科学与技术专业--水墨的影视艺术语言的研究
- MicroByte蓝牙手柄初探
- IT零起点转FICO学习路线（转）
- 微信公众号已认证如何修改名字？
- ImportError: cannot import name ‘evaluate‘ from ‘surprise‘解决方案
- 阿里云和华为云各自的优势
- python-onvif 库踩坑
- 解决UnityHub登录不上问题