伪类选择器的小结，CSS3过渡及2D转换及移动translate

目录

一.伪类选择器的小结

二.CSS3过渡

三.2D转换及移动translate

---

一.伪类选择器的小结

1.结构伪类选择器一般用于选择父级里面的第几个孩子

2.nth-child 对父元素里面所有孩子排序 选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

3.nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找到第n个孩子

4.关于nth-child(n) 我们要知道n是从0开始计算的

5.如果是无序列表，我们肯定用th-child更多

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

二.CSS3过渡

transition:要过渡的属性  花费时间  运动曲线  何时开始

1.属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以。如果想要所有属性都变化过渡，写一个all就可以了

2.花费时间：单位是秒（必须写单位）比如0.5s

3.运动曲线：默认是ease（可以省略 ）

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

 

三.2D转换及移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

1.语法

transform:translate(X,Y) 或者分开写

transform:translateX(n)

transform:translateY(n)

2.重点

1.定义2D转换中的移动，沿着X和Y轴移动元素

2.translate最大的优点：不会影响到其他元素的位置

3.translate中的百分比单位是相对于自身元素的translate:(50%,50%)

4.对行内标签没有效果