链接:CSS3餐厅练习
玩法:利用各种选择器选中抖动的物体即可通关
1.Type Selector(元素选择器)
元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:p{} h1{} div{}
plate
2.Type Selector(元素选择器)
bento
3.ID Selector(ID选择器)
id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:#box{} #red{}
#fancy
4.Descendant Selector(子元素选择器)
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
plate>apple
5.Combine the Descendant & ID Selectors(组合子元素和id选择器)
#fancy>pickle
6.Class Selector(类选择器)
类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值
.small
7.Combine the Class Selector(组合类选择器)
orange.small
8.子元素选择器和交集选择器
交集选择器
作用:选中同时复合多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
注意点:
交集选择器中如果有元素选择器,必须使用元素选择器开头
bento>orange.small
9.Comma Combinator(并集选择器)
选择器分组(并集选择器)
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{}
举例: #b1,.p1,h1,span,div.red{}
plate,bento
10.The Universal Selector(通配符选择器)
通配选择器
作用:选中页面中的所有元素
语法: *
*
11.Combine the Universal Selector(组合通配符选择器)
后代元素选择器:
作用:选中指定元素内的指定后代元素
语法:祖先 后代
plate空格*
plate *
12.Adjacent Sibling Selector(兄弟选择器)
兄弟选择器
选择下一个兄弟
语法:前一个 + 下一个
举例:A+B :(使用加号)表示选择当前兄弟(A)的下一个兄弟(B)元素,以A为定位来选择B
plate+apple
13.General Sibling Selector(通用的兄弟选择器)
选择下边所有的兄弟
语法:兄 ~ 弟
bento~pickle
14.Child Selector (子元素选择器)
plate>apple
15.First Child Pseudo-selector(第一个孩子的伪选择器)
伪类(不存在的类,特殊的类)
- 伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素…
- 伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值:
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
- 以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
- 这几个伪类的功能和上述的类似,不通点是他们是在同类型元素中进行排序 -:not() 否定伪类
- 将符合条件的元素从选择器中去除
plate>orange:first-child
16.Only Child Pseudo-selector(唯一孩子伪类选择器)
plate>:only-child
17.Last Child Pseudo-selector(最后一个孩子伪类选择器)
.small:last-child
18.Nth Child Pseudo-selector(第n个孩子伪选择器)
plate:nth-child(3)
19.Nth Last Child Selector(倒数第n个孩子伪选择器)
注意:这里的:nth-last-child(n) 中的n是3,因为他不是在同类元素中排序的
:first-of-type
:last-of-type
:nth-of-type()
- 上面这些以type结尾才是在同类型元素中进行排序
bento:nth-last-child(3)
20.First of Type Selector(第一个孩子伪类选择器(在同类元素中排序的))
apple:first-of-type
21.Nth of Type Selector(第n个孩子伪类选择器(在同类元素中排序))
plate:nth-of-type(2n)
或者
plate:nth-of-type(even)
22.Nth-of-type Selector with Formula(具有公式的 n 次伪类选择器)
Tip: 自己根据规律写出An+B
plate:nth-of-type(2n+3)
23.Only of Type Selector(唯一孩子伪类选择器(在同类元素中排序))
apple:only-of-type
24.Last of Type Selector(最后一个孩子的伪类选择器)
.small:last-of-type
25.Empty Selector(空的伪类选择器)
bento:empty
26.Negation Pseudo-class(否定式伪类选择器)
apple:not(.small)
27.Attribute Selector(属性选择器)
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
[for]
28.Attribute Selector(属性选择器)
plate[for]
29.Attribute Value Selector(根据属性值选择)
[for="Vitaly"]
30.Attribute Starts With Selector(属性开头选择器)
[for^="Sa"]
31.Attribute Ends With Selector(属性结尾选择器)
[for$="ato"]
32.Attribute Wildcard Selector(属性通配符选择器)
[for*="obb"]