- A+
1. CSS3 新增选择器
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
1.1 属性选择器
属性选择品可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
|
选择符 |
简介 |
|
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 的E元素。 |
注意：类选择器、厲性选择器、伪类选择器，权重为 10。
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个 。 |
nth-child （n）选择某个父元素的一个或多个特定的子元素。
n可以是数字，关键字和公式。
n如果是数字 ，就是选择第n 个子元素 ，里面数字从1开始…。
n可以是关键字：even偶数，odd 奇数。
n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）。
|
公式 |
取值 |
|
2n |
偶数。 |
|
2n+1 |
奇数。 |
|
5n |
5 10 15...。 |
|
n+5 |
从第5个开始（包含第五个）到最后。 |
|
-n+5 |
前5个（包含第5个）。 |
区别：
1. nth-child对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子 ，然后看看是否和E匹配。
2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子。
1.3 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
|
选择符 |
简介 |
|
::before |
在元素内部的前面插入内容。 |
|
::after |
在元素内部的后面插入内容。 |
注意：
（1） before 和after 创建一个元素，但是属于行内元素。
（2） 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
语法：
| element::before {} |
before 和after必须有 content 属性。
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素。
伪元泰选择器和标签选择器一样，权重为 1。
伪元素选择器使用场景：伪元素清除浮动
|
升级 |
优化 |
|
.clearfix:after { } |
.clearfix:before, .clearfix:after { } } |
2. CSS3盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为content-box border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）。
2. box-sizing:border-box 盒子大小为 width。
如果盒子模型我们改为了box-sizing; border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）。
2.1 CSS3滤镜filter
filter Css属性将模糊或颜色偏移等图形效果应用于元素。
filter:函数(）例如：filter:blur(5px); blur模糊处理 数值越大越模糊。
2.2 CSS3calc 函数
calc（此CSS函数让你在声明CSS属性值时执行一些计算）。
width: calc(100% - 80px); （运算符号前面必须有空格，并注意包含单位）。
括号里面可以使用 ＋-*/ 来进行计算。
2.3 CSS3 过渡
过渡 (transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或javaScript 的情况下 ，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另外一个状态。
transition:要过渡的属性 花费时间 运动曲线 何时开始；
1.属性：想要变化的 css 属性，完度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
2. 花费时间 ：单位是 秒（必须写单位）比如0.5s。
3.运动曲线：默认是ease（可以省路）。
4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）。
口诀：谁做过渡给谁加。
