CSS3的新特性 CSS3的新特性

新增选择器 1.属性选择器属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
注意：类选择器、属性选择器、伪类选择器，权重为 10。

文章图片
属性选择器.png 2.结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

文章图片
结构伪类选择器.png
nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）
n 可以是数字，关键字和公式
n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…
n 可以是关键字：even 偶数，odd 奇数
n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

文章图片
公式.png 3.伪元素选择器
文章图片
伪元素选择器.png before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为 1
4.新增盒子模型 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宽度）
5.其他特性 CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如： filter: blur(5px); blur模糊处理数值越大越模糊

文章图片
filter.png
calc()函数: 此CSS函数让你在声明CSS属性值时执行一些计算。width: calc(100%-80px);
括号里面可以使用 + - * / 来进行计算。
6.过渡 【CSS3的新特性】过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或
JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局，经常和 :hover 一起搭配使用。
1.属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。

花费时间：单位是秒（必须写单位）比如 0.5s
运动曲线：默认是 ease （可以省略）
4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）
记住过渡的使用口诀：谁做过渡给谁加。

div { width: 200px; height: 200px; background-color: pink; /* 属性，时间 */ /* transition: width .5s; */ /* 如果多个属性都变化，属性写all就可以了 */ /* 谁做过渡给谁 */ transition: all .5s; }div:hover { margin-top: 20px; background-color: powderblue; }