CSS3，选择器，2d转换(移动)transform

1.CSS选择器

1.1.属性选择器

类选择器，属性选择器，伪类选择器，权重为10

选择符	简介
E[att]	选择具有att属性的E元素
E[att=‘val’]	有att属性值等于val的E元素
E[att^=‘val’]	匹配具有att属性，且值以val开头的E元素
E[att$=‘val’]	匹配具有att属性，以val结尾的E元素
E[att*=‘val’]	匹配具有att属性，值中含有val的元素

1.2.结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

2.2.1.nth-child(n)

• n可以是数字，关键字和公式
• n如果是数字，就是选择第几个
• 常见的关键词有even(偶数)，odd(奇数)
• 常见的公式如下（如果n是公式，则从0开始计算）
• 但是第0个元素或者超出了元素的个数会被忽

公式	取值
2n	偶数
2n+1	奇数
5n	5，10，15…
n+5	从5开始（包含第5个）到最后
-n+5	前5个（包含第5个）

总结：nth-child(n)选择父元素里面的第n个孩子，它不管里面的孩子是否是同一个类型。

1.3.伪类选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before和after必须有content属性
• before和after创建一个元素，但是属于行内元素
• 因为在dom里看不见刚才创建的元素，所以我们称为伪元素
• 伪元素和标签选择器一样，权重为1

2.2d转换

转换(transform),实现元素位移，旋转，缩放等效果

• 移动：translate
• 旋转：rotate
• 缩放：scale

2.1.二维坐标系

从屏幕的左上角为（0，0）点。横向为x轴。纵向为y轴。

2.2.移动translate (类似定位)

1.语法
	transform:translate(x,y)
	transform:translateX(n)
	transform:translateY(n)
2.重点
	1.translate，沿着x和y轴移动元素
	2.translate最大优点，不会影响其他元素的位置
	3.translate中的百分比单位是相对于自身元素的translate：(5%,50%)
	4.对行内标签没有效果