CSS经典练习题-餐厅练习

---

前言

CSS经典案例：餐厅练习
玩法：选中桌子上晃动的物品即可。

---

参考答案以及解释

第 1关：Type Selector

代码如下（示例）：

Select elements by their type
A
Selects all elements of type A. Type refers to the type of tag, so<div>, <p> and<ul> are all different element types.
Examples
<div> selects all div elements.
<p>selects all p elements.

参考答案：

plate

解释：plate元素

第2关：Type Selector

Select elements by their type
A
Selects all elements of type A. Type refers to the type of tag, so <div>, <p> and<ul> are all different element types.
Examples
div selects all div elements.
<p>selects all p elements.

参考答案：

bento

解释：bento元素

第3关：ID Selector

Select elements with an ID
#id
Selects the element with a specific id. You can also combine the ID selector with the type selector.
Examples
#cool selects any element with id="cool"
ul#longselects <ul id="long">

参考答案：

#fancy

解释：id为fancy的元素

第4关：Descendant Selector

Select an element inside another element
A B
Selects all B inside of A. B is 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 element with id="fancy"

参考答案：

1、plate > apple
2、plate apple

解释：plate祖先元素下的apple后代元素（也是子元素）

第5关：Combine the Descendant & ID Selectors

#id A
You can combine any selector with the descendent selector.
Examples
#cool spanselects all <span> elements that are inside of elements withid="cool"

参考答案：

1、#fancy > pickle
2、plate pickle

解释：id为#fancy的祖先元素下的pickle后代元素（也是子元素）

第6关：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

解释：组为small的元素

第7关：Combine the Class Selector

A.className
You can combine the class selector with other selectors, like the type selector.
Examples
ul.importantselects all <ul >elements that have class="important"
#big.wideselects all elements with id="big"that also haveclass="wide"

参考答案：

orange.small

解释：组为small的orange元素

第8关：子元素选择器+交集选择器

参考答案：

1、bento > orange.small
2、bento orange.small

解释：bento父元素下的组为small的orange子元素

第9关：Comma Combinator

Combine, selectors, with… commas!
A, B
Thanks to Shatner technology, this selects all A and B elements. You can combine any selectors this way, and you can specify more than two.
Examples
p, .funselects all <p> elements as well as all elements with class="fun"
a, p, div selects all <a>,< p> and<div >elements

参考答案：

plate,bento

解释：plate,bento兄弟元素在div元素中

第10关：The Universal Selector

ou can select everything!
*
You can select all elements with the universal selector!
Examples
p *selects any element inside all <p> elements.

参考答案：

*

解释：*代表所有元素

第11关：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.

参考答案：

1、plate *
2、plate>*
3、plate>apple,pickle,orange
4、plate apple,pickle,orange

解释：plate父元素的所有子元素（所有后代元素）

第12关：Adjacent Sibling Selector

Select an element that directly follows another element
A + B
This selects allB elements 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 + .introselects every element with class="intro"that directly follows a <p>
div + aselects every a element that directly follows a <div>

参考答案：

plate + apple

解释：兄弟元素选择器，plate元素的后一个元素

第13关：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 all B that follow a A

参考答案：

bento ~ pickle

解释：兄弟元素选择器,bento元素后的多个pickle元素

第14关：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 children A

参考答案：

plate > apple

解释：plate父元素下的apple子元素

第15关：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 a <div>.

参考答案：

plate orange:first-child

解释：子元素选择器，plate元素下的第一个orange元素

第16关：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.

参考答案：

plate apple:only-child,plate pickle:only-child

解释：所有plate元素下唯一的apple的元素，所有plate元素下唯一的pickle的元素

第17关：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>.

参考答案：

1、apple:last-child,pickle:last-child
2、apple,pickle

解释：id为fancy的元素的最后一个和pickle元素的最后一个

第18关：Nth Child Pseudo-selector

Select an element by its order in another element
:nth-child(A)
Selects the nth (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 second p in every <div>

参考答案：

plate:nth-child(3)

解释：div元素中的第三个plate元素

第19关：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)

解释：div元素中倒数第三个bento元素（包括所有子元素从后往前数第三个）

第20关：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-type selects the first span in any element.

参考答案：

apple:first-of-type

解释：第一个apple元素

第21关：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.

参考答案：

1、plate:nth-of-type(2n)
2、plate:nth-of-type(even)

解释：所有偶数个的plate元素

第22关：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)

解释：plate元素下的第3个和第5个元素

第23关：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-type selects a span within any<p>if it is the only <span> in there.

参考答案：

apple:only-of-type

解释：plate元素下满足apple.small元素的唯一一个元素

第24关：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-type selects the last div in every element.

span:last-of-type selects the last span in every

参考答案：

orange:last-of-type,apple:last-of-type

解释：是orange.samll和apple.small元素的最后一个元素

第25关：Empty Selector

Select elements that don’t have children
:empty
Selects elements that don’t have any other elements inside of them.
Examples
div:empty selects all empty<div> elements.

参考答案：

bento:empty

解释：bento元素里没有包括额外元素

第26关：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 have id="fancy".
div:not(:first-child) selects every<div>that is not a first child.
:not(.big, .medium) selects all elements that do not have class="big"or class="medium".

参考答案：

apple:not(.small)

解释：apple里没有组是.small的元素

第27关：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 a href="anything" attribute.
[type]selects all elements that have a type="anything". attribute

参考答案：

apple[for],bento[for],plate[for]

解释：带for标签的plate元素

第28关：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 a value="anything" attribute.
a[href] selects all a elements that have ahref="anything"attribute.
input[disabled]selects all input elements with the disabled attribute

参考答案：

plate[for]

解释：带有for标签的plate元素

第29关：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.

参考答案：

bento[for="Vitaly"]

解释：带有for标签标签名为Vitaly的bento元素

第30关：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 class toy and eithercategory="Swimwear or category="Swimming".

参考答案：

[for^='S']

解释：以S开头的标签所在的元素

第31关：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$=o]

解释：以o结尾的标签所在的元素

第32关：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"and class="sub-heading".

参考答案：

[for*='bb']

解释：标签中包含bb标签名的元素

---

通关