此笔记来自于跟尚硅谷老师学习，此篇是对CSS选择器的总结以及视频中的P37的餐厅练习自己做的答案，自己所写，用于自我复习。
P37尚硅谷_餐厅练习： https://flukeout.github.io/
目录
4.Select the apple on the plate
8.Select the small oranges in the bentos
9.Select all the plates and bentos
11.Select everything on a plate
12.Select every apple that's next to a plate
13.Select the pickles beside the bento
14.Select the apple directly on a plate
16.Select the apple and the pickle on the plates
17.Select the small apple and the pickle
22.Select every 2nd plate, starting from the 3rd
23.Select the apple on the middle plate
24.Select the last apple and orange
27.Select the items for someone
28.Select the plates for someone
30.Select the items for names that start with 'Sa'
31.Select the items for names that end with 'ato'
32.Select the meals for names that contain 'obb'
css选择器
选择器，通过选择器可以选中页面中的指定元素，以便使用声明块来为指定元素设置样式。比如p的作用就是选中页面中所有的p元素。
一、常用选择器（元素选择器，id选择器，类选择器,class选择器，通配选择器）
1.元素选择器（Type selector）
作用：根据标签名来选中指定的元素
语法：标签名{} 比如：p{} h1{}
2.id选择器（ID selector）
作用：根据元素的ID属性值选中一个元素
语法：#id属性值{} 比如：#box{}
3.类选择器（Class selector）
作用：根据元素的class属性值选中一组元素
语法：.class属性值{}
注意：class属性可设置多个属性值，可属于不同的类，如class="blue abc"
4.通配选择器（Universal selector）
作用：选中页面中的所有元素
语法：*{}
二、复合选择器（交集选择器，并集选择器）
1.交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
example: div.red{} 表示选择标签为div且class为red的元素
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头。
2.并集选择器或选择器分组（Selector list）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
三、关系选择器（子元素选择器，后代元素选择器，选择下一个兄弟，选择下边所有的兄弟）
1.子元素选择器（Child combinator）
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
2.后代元素选择器（Descendant combinator）
作用：选择指定元素内的指定后代元素
语法：祖先 后代（中间为空格）
3.选择下一个兄弟（Adjacent sibling combinator）
语法：前一个 + 后一个
注意：只能选与前一个紧挨着的下一个元素
4.选择下边所有的兄弟（General sibling combinator）
语法：兄~弟
注意：其选择的是兄下边所有的弟，不能选择其上的元素
四、属性选择器（Attribute selector）
[属性名] 选择含有指定属性的元素；
[属性名=属性值] 选择含有指定属性和属性值的元素；
[属性名^=属性值] 选择属性值以指定值开头的元素；
[属性名$=属性值] 选择属性值以指定值结尾的元素；
[属性名*=属性值] 选择属性值中含有某值的元素。
五、伪类选择器（Pseudo classes）
伪类（不存在的类，特殊的类），伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素等。
伪类一般情况下使用：开头。
:first-child{} 兄弟元素中第一个元素 比如：ul > li:first-child{}表示ul子元素li中的第一个元素
:last-child{} 兄弟元素中最后一个元素
:nth-child(){} 选中兄弟元素中第几个元素（括号中写几就选中第几个）
特殊值：
n 表示选择所有
2n 或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素
注意：以上这些伪类都是根据所有的兄弟元素进行的排序
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能与上述的类似，不同点是他们是在同类型的元素中进行排序。
:not(){} 否定伪类：将符合条件的元素从选择器中去除
六、伪元素选择器（Pseudo elements）
伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用::开头
::first-letter 表示其第一个字母
::first-line 表示其第一行
::selection 表示在页面中鼠标选中的内容
::before 表示元素的开始
::after 表示元素的最后
注意：使用::before和::after添加的内容是通过CSS添加的，在网页中选中时，无法选中其添加的内容。
七、伪超链接
:link 用来表示没访问过的链接（正常的链接） a;link{} <a></a>为超链接
注意：在link里修改字体大小时，所有的链接都会改变，因为它也是针对正常的链接。
:visited 用来表示访问过的链接
注意：由于隐私的原因，所以visited这个伪类只能修改链接的颜色，字体大小无法修改。
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
1.Select the plates
<div class="'table"> <plate /> <plate /> </div>输入：plate
（元素选择器）
2.Select the bento boxes
<div class="'table"> <bento /> <plate /> <bento /> </div>输入：bento （元素选择器）
3.Select the fancy plate
<div class="'table"> <plate id='fancy'/> <plate /> <bento /> </div>输入：#fancy
(id选择器，语法：#ID属性值，本题也可输入plate#fancy，但没必要，因为使用id一般是唯一的)
4.Select the apple on the plate
<div class="'table"> <bento /> <plate> <apple /> </plate> <apple /> </div>输入：plate > apple 或plate apple
(子元素选择器或后代选择器。the apple on the plate说明要选择plate标签下的子标签apple，故使用子元素选择器，语法：父元素 > 子元素)
5.Select the pickle on the fancy plate
<div class="'table"> <bento> <orange /> </bento> <plate id='fancy'/> <pickle /> </plate> <plate> <pickle /> </plate> </div>输入：#fancy > pickle 或#fancy pickle
（子元素选择器或后代选择器。the pickle on the fancy plate说明要选择id为fancy的plate标签下的子标签pickle，故使用子元素选择器，语法：父元素 > 子元素）
6.Select the small apples
<div class="'table"> <apple /> <apple class="small" /> <plate> <apple class="small" /> </plate> <plate /> </div>输入：.small
(使用类选择器，语法：.class属性值)
7.Select the small oranges
<div class="table"> <apple /> <apple class="small"> <bento> <orange class="sma1l"/> </bento> <plate> <orange /> </plate> <plate> <orange class="sma1l"/> </plate> </div>输入：orange.small (交集选择器)
8.Select the small oranges in the bentos
<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>输入：bento > orange.small 或者 bento orange.small (子选择器加交集选择器)
9.Select all the plates and bentos
<div class="table"> <pickle class="sma1l"/> <pickle /> <plate> <pickle /> </plate> <bento> <pickle /> </bento> <plate> <pickle /> </plate> <pickle /> <pickle class="small" /> </div>输入：plate,bento （并集选择器，语法：选择器1,选择器2,选择器3）
10.Select all the things!
<div class="table"> <apple /> <plate> <orange class=small”/> </plate> <bento /> <bento> <orange /> </bento> <plate id="fancy" /> </div>输入：* (通配选择器，选择页面中所有的元素，语法：*)
11.Select everything on a plate
<div class="table"> <plate id="fancy"> <orange class="small"/> </plate> <plate> <pickle /> </plate> <apple class="sma11" /> <plate> <apple /> </plate> </div>输入：plate > 或 plate > * 或 plate * （子选择器）
12.Select every apple that's next to a plate
<div class="tab1e"> <bento> <apple class="sma1l"/> </bento> <plate /> <apple class="sma1l"/> <plate /> <apple /> <apple class="sma11" /> <apple class="small" /> </div>输入：plate+apple （选择下一个兄弟）
13.Select the pickles beside the bento
<div class="table"> <pickle /> <bento> <orange class="small" /> </bento> <pickle class="small" /> <pickle /> <plate> <pickle /> </plate> <plate> <pickle class="small" /> </plate> </div>输入：bento~pickle （选择后面所有的兄弟）
14.Select the apple directly on a plate
<div class="table"> <plate> <bento> <apple /> </bento> </p1ate> <plate> <apple /> </plate> <plate /> <apple /> <apple class="small" /> </div>输入：plate>apple （子元素选择器，不能是祖先选择器，因为其是直接在盘子里的苹果）
15.Select the top orange
<div class="table"> <bento /> <plate /> <plate> <orange /> <orange /> <orange /> </plate> <pickle class="sma1l" /> </div> 输入：plate>orange:first-child （伪类选择器:first-child 选择兄弟元素中的第一个元素）
16.Select the apple and the pickle on the plates
<div class="table"> <plate> <apple /> </p1ate> <plate> <pickle /> </plate> <bento> <pickle /> </bento> <plate> <orange class="small" /> <orange /> </plate> <pickle class="sma1l" /> </div>输入：plate > :only-child
17.Select the small apple and the pickle
<div class="table"> <plate id="fancy"> <app1e class="sma11" /> </plate> <plate /> <plate> <orange class="sma1l" /> <orange /> </plate> <pickle class="smal1" /> </div>输入：#fancy> ,pickle 或者apple.small,pickle
18.Select the 3rd plate
输入：plate:nth-child(3)
19.Select the 1st bento
输入：bento:first-of-type
20.Select first apple
输入：apple:first-of-type
21.Select all even plates
输入：plate:nth-child(even)
22.Select every 2nd plate, starting from the 3rd
输出：plate:nth-of-type(2n+3)
（：nth-of-type(An+B)
The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.
example:span:nth-of-type(6n+2) selects every 6th instance of a span, starting from (and including) the second instance.）
23.Select the apple on the middle plate
<div class="table"> <plate id="fancy"> <apple class="sma11" /> <apple /> </plate> <plate> <apple class="small" /> </plate> <plate> <pickle /> </plate> </div>输入：plate apple:only-of-type 或: nth-child(2)>apple
(:only-of-type
Selects the only element of its type within another element.
example: p span:only-of-type selects a span within any p if it is the only span in there.)
24.Select the last apple and orange
输入：orange:last-of-type,apple:last-of-type
25.Select the empty bentos
输入：bento:empty
（:empty
Selects elements that don't have any other elements inside of them.
example: div:empty selects all empty div elements.）
26.Select the big apples
<div class="table"> <plate id="fancy"> <apple class="sma1l" /> </plate> <p1ate> <apple /> </plate> <apple /> <plate> <orange class="small"/> </plate> <pickle class="small" /> </div>输入：apple:not(.small)
27.Select the items for someone
输入：[for]
28.Select the plates for someone
输入：plate[for] 或者 [for=Sarah],[for=Luke]
29.Select Vitaly's meals
输入：[for=Vitaly]
30.Select the items for names that start with 'Sa'
输入：[for^=Sa]
31.Select the items for names that end with 'ato'
输入：[for$=ato]
32.Select the meals for names that contain 'obb'
输入：[for*=obb]
3989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
