伪类选择器、动画样式、transform样式

伪类选择器

	分为状态类伪类选择器、结构类选择器和属性类选择器。

状态伪类选择器

1. 更改未访问的链接状态
   a:link{
   样式内容
   }
2. 更改已访问的链接状态
   a:visited{
   样式内容
   }
3. 鼠标移入时改变样式，以链接为例
   a:hover{
   样式内容
   }
4. 选定标签，鼠标按下不松开时，以链接为例
   a:active{
   样式内容
   }
5. .改变被选中表单的样式
   input:checked{
   样式内容
   }
6. 改变表单聚焦时的状态
   input:focus{
   样式内容
   }

结构伪类选择器

1. li:nth-child($){}
   $可以是具体的数字，也可以是2n+1或2n这样的公式。目的是选择ul中第$个li,改变其样式。但如果li中穿插别的标签，就会受影响，当$正好是其他的标签时，就会失效。

2. li:nth-last-child($){}
   $可以是具体的数字，也可以是2n+1或2n这样的公式。目的是倒序选择ul中第$个li,改变其样式。但如果li中穿插别的标签，就会受影响，当$正好是其他的标签时，就会失效。

3. p:nth-of-type($){}
   $可以是具体的数字，也可以是2n+1或2n这样的公式。目的是选择u第$个p,改变其样式。但如果li中穿插别的标签，不会受影响。

4. li:first-child{}
   找到第一个li，也是会受其他标签影响。

5. li:last-child{}
   找到最后一个li，也是会受其他标签影响。

6. p:first-of-type{}
   找到第一个li，不会受其他标签影响。

7. p:last-of-type{}
   找到最后一个li，不会受其他标签影响。

8. p:nth-of-type(even){} 偶数
   p:nth-of-type(odd){} 奇数

属性伪类选择器

1. 通过id来找到标签,标签里有id,或者直接写id名
   div[id]{}
   [id]{}
2. 通过class来找到标签，比如class名为aa的
   [class=aa]{}
   [class~=aa] {} 此处class中包含完整的aa字符串
3. 通过开头，结尾来找的
   [id^=bb]{} id以bb开头
   [id$=bb]{} id以bb结尾
4. 通过包含的字符来找的
   [class*=t] 只要class名里有t这个字符就可以

伪元素

1. ul::before{
   content:"";
   }
   即在ul所有元素之前，其中的content起激活作用，必须有。
2. ul::after{
   content:"";
   }
   即在ul所有元素之后，其中的content起激活作用，必须有。
   一个元素只有一个after和一个before
3. div::selection{}
   改变div内容选中时的状态
4. p::first-letter{}
   改变段落中第一个字符的状态
5. p::first-line{}
   改变段落中第一行的状态，这两个只能用在p中

动画样式

1. 触发式动画
   常见触发动作:hover/:checked/:active…
   1. 执行时间------transition-duration:5s;
   2. 延迟执行------transition-delay:3s;
   3. 执行速度------transition-timing-function:
   linear 匀速
   ease慢快慢
   ease-in慢速开始
   ease-out慢速结束
   ease-in-out慢快慢
   两个慢快慢速度上有所不同。
   4. 过渡动画的属性-----transition-property
   当其为all时，就是整个元素在变化，当其为width时，只有width有效果，但其后只能加有确定值的属性。
   触发式动画，当写在hover中时，变回原状会立刻回去，当其直接写在元素样式中时会慢慢消失。
   5. 复合写法
   transition:property duration timing-function delay;
2. 主动式动画
   @keyframes animation-name{
   0%{}
   50%{}
   100%{}
   }
   中间的百分比看需要设计
   @keyframes animation-name{
   from{}
   to{}
   }
   在元素样式处加上
   animation:animation-name duration timing-function delay iteration-count direction;
   注释：1. iteration-count是执行次数，infinite是无限循环。
   2. direction是指效果运动的方向。normal是from-to from-to…
   alterate是from-to-from-to…
   reverse是to-from to-from…
   alterate-reverse是to-from-to-from…

transform样式

1. 旋转
   transform:rotate(角度值，单位是deg)
2. 平移
   transform:translate(x,y);沿x轴或y轴平移的距离，单位是px，也可分开写为translateX,translateY.
3. 缩放
   transform:scale(x,y);沿横向和纵向缩放的倍数，无单位，可分开写为scaleX,scaleY.当为负值时，元素会反向缩放，可以自己试一下，用动画效果开看过程。
4. 倾斜
   transform:skew(x,y);单位是deg.
5. 变化原点
   上面的变化效果，基本都是根据中心位置来变化的，用transform-origin可以改变原点位置。
6. 复合写法
   同样有复合写法，无先后顺序，先写什么，先出现什么效果。