1、结构选择器

1、属性选择器

标签[属性=值]{}

 举例:
div[id='box']{} 或者div[id=box]{}：属性id值为box的div标签的样式
这个属性可以是id 也可以是class 或者自定义的属性比如 color等

2、伪类选择器

以下公式中 T：标签名; n第几个元素（n从1开始）

T:nth-child(n)

T标签的父标签的第n子标签，并且这个标签是T则匹配样式

T:nth-last-child(n)

T标签的父标签的倒数第n子标签，并且这个标签是T则匹配样式

T:nth-of-type(n)

T标签的父标签的第n个T标签，匹配样式

T:nth-last-of-type(n)

T标签的父标签的倒数第n个T标签，匹配样式

T:first-child 等同于T:nth-child(1)
T:last-child 等同于T:nth-last-child(1)
T:nth-first-type 等同于T:nth-of-type(1)
T:nth-last-type 同于T:nth-last-of-type(1)

些选择器中n还可以是odd和even，分别表示选择奇数个和选择偶数个。

target 伪类选择器当点击a标签选中到锚点后对应目标会匹配相应样式如下样例（原来为红色方框，点div文字的a标签后方框变成蓝色）：

 <style>
    .box{
      height:200px;
      width:200px;
      background: red;
    }
    .box:target{
      background: blue;
    }
  </style>
...
    <a href="#div1">div1</a>
    <div id="div1" class="box"></div>

checked伪类选择器对input的type为checkbox多选框和radio单选框有效。以下样例（点击复选框后复选框将变成100*100大小）

<style>
  input:checked{
    width: 100px;
    height: 100px;
  }
</style>
...
  <input type="checkbox"></input>

first-line伪类作用在标签文本上，比如p:first-line 文本的第一行匹配样式
first-letter伪类作用在标签文本上，比如p:first-letter 文本的第一个字匹配样式
selection伪类 E::selection 必须用双:,表示E标签内文字被选中后的样式
before伪类 E:before 在E标签的前面添加内容,一般要在before的样式内添加content: 'xxx';表示添加的内容
after伪类 E:after 在E标签的后面添加内容
not伪类 E:not(s) 给E标签除了class或者id是s的加样式（s为#id或者.class名）

3、 ~选择器

E~F E标签后所有的F标签加上样式

4、文字阴影

text-shadow:p1 p2 p3 p4[,...]

p1:x轴偏移量

p2:y轴偏移量

p3:阴影大小

p4:阴影颜色

[,...]：加上一个,可以再加一组阴影与前面叠加；可以多个叠加；

不建议用叠加，很耗费浏览器性能

5、盒模型阴影

box-shadow:p1 p2 p3 p4 p5 p6[,...]

p1:可选变量 inset(内阴影) 省略则是外阴影

p2:x轴偏移量

p3:y轴偏移量

p4:阴影的扩展半径（可选参数，可不写）

p5:阴影大小

p6:阴影颜色

[,...]：加上一个,可以再加一组阴影与前面叠加；可以多个叠加；

不建议用叠加，很耗费浏览器性能

6、transition 过渡

参数1：可选参数，延时过渡的时间，默认是0 ，单位有s和ms 1s=1000ms

参数1：过渡的时间，单位有s和ms 1s=1000ms

参数2：过渡的属性；默认是all

参数3：过渡方式；默认是ease（减速）；还有linear（匀速）、ease-in(慢入加速）、ease-out(慢出减速)、ease-in-out(慢入慢出)、cubic-bezier(贝塞尔曲线，可以通过网站 www.cubic-bezier.com 生成)

transition的参数可以通过','分割并且控制不同属性在不同时间完成效果例如：transition:1s width, 2s height

7、transform

旋转 transform:rotate(n deg) 旋转角度只针对块元素有效，行内元素无效

n表示旋转的角度 deg是单位度

倾斜 transform:skew(n deg) x轴倾斜n度

想要朝Y轴倾斜就使用transform:skewY(n deg); skew(n deg)==skewX(n deg)

想要同时X轴和Y轴都倾斜使用transform:skew(n deg,m deg)。

缩放 tansform:scale(n) 按原来的n倍放大大于1则放大小于1则缩小

想要朝X轴或者Y轴单独放大则使用scaleX和scaleY

想要同时X轴和Y轴都放大使用transform:scale(n,m)。x轴放大n倍 y轴放大m倍。

位移 transform:translate(n px)

想要朝X轴或者Y轴单独位移则使用translateX和translateY

想要同时X轴和Y轴同时移动使用transform:translate(n,m)。x轴移动n y轴移动m。

transform可以多种运动合并，逆向执行。写在前面的后执行，写在后面的先执行。所以书写顺序不同运行效果也会不同

改变transform变化的基点 transform-origin: 位置参数1 参数2

位置参数可以是left right top bottom center，也可以x轴位置 + y轴位置来表示基点

8、3D变换

transform-style:preserve-3D 把一个盒模型由2D转化成3D；这个样式还需要另一个样式：prespective:n px(景深)才有3D效果。比如：

.box{
    transform-style: preserve-3D;
    prespective: 100px;
}

3D变化需要在父场景是3D盒模型并且有一定景深才有效果

transform:rotateX(n deg) 按x轴旋转n度
transform:rotateY(n deg) 按y轴旋转n度
transform:translateZ(n px) n正则朝着屏幕外移动，n负责朝着屏幕内移动

9、animation

animation: 参数1 参数2 参数3 参数4

参数1：运动的时间；

参数2：关键帧的名字；

参数3：过渡形式，可省参数；参数类型和tansition的过渡形式一样有ease、linear等

参数4：动画的次数，可省参数，默认是1；可以是数字，也可以是infinite(无限次)

参数4：运动的顺序，可省参数，默认是正常0-100%的顺序；还有alternate(类似于pingpang来回）、nomarl(正常）

关键帧的定义：

@keyframes name{
    0%{
        属性：值
    },
    n%{
        属性：值
    },
    ...
    100%{
        属性：值
    }
    
}

animation-play-state:状态

控制动画的状态；状态值可以是paused（暂停），running（播放）

css3一些要点