CSS3的新特性

---

1、兼容性

• IE9+才支持
• 移动端支持优于PC端

2、新增选择器

2.1、属性选择器

选择符	简介
input[value]	根据属性选择
input[type=text]	根据属性值选择
input[class^=txt]	选择class属性值以txt开头的input
input[class$=txt]	选择class属性值以txt结尾的input
input[class*=txt]	选择class属性值包含txt结尾的input

注意：类选择器、属性选择器和伪类选择器权重都是10

属性选择器示例：

<style>
    input[value] {
        color: red;
    }
</style>

<input type="text" value="请输入用户名">
<input type="text">

2.2、结构伪类选择器

2.2.1、nth-child选择器

结构伪类选择器	简介
ul :first-child	1、ul里的第一个子节点 (注意ul后面有空格) 2、等价于ul li:first-child|
ul li:last-child	ul里的最后一个叫li的子节点
ul li:nth-child(2)	ul里的第2个叫li的子节点
ul li:nth-child(even)	ul里的第偶数个叫li的子节点
ul li:nth-child(odd)	ul里的第奇数个叫li的子节点
ul li:nth-child(n)	1、此处的n从0开始，每次加1一直往后计算直至遍历完所有的子节点 2、ul li:nth-child(n)表示ul里所有叫li的子节点 3、ul li:nth-child(2n)表示选择ul里第2、4、6… …个叫li的子元素 4、如果是其它公式，依次类推

nth-child(n) 公式的取值含义：

公式	取值
2n	偶数
2n+1	奇数
5n	5、10、15… …
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第5个）

2.2.2、nth-of-type选择器

nth-of-type结构伪类选择器

选择符	简介
ul li:first-of-type	ul里叫li的第一个子元素
ul li:last-of-type	ul里叫li的最后一个子元素
ul li: nth-of-type(n)	用法参照 nth-of-child(n)基本一致

2.2.3、nth-child与nth-of-type选择器区别

举例说明，html如下：

<section>    
    <div>熊大</div>
    <p>光头强</p>
    <div>熊二</div>    
</section>

section div:nth-child(2)：先找到第二个孩子，但元素标签是p,因此没有符合的子元素。
section div:nth-of-type(2)：先找到标签为div的子元素，然后选择第2个，此时熊二被选择。

2.3、伪元素选择器

2.3.1、伪元素选择器的使用

• 伪元素选择器可以利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML毕构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before和after创建一个元素，但是属于行内元素
• 新创建的这个元素在文档中是找不到的，所以称为伪元素
• 语法：element::before{}
• before和after必须有content属性
• before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为1

<style>
    div::after {
        content: '江湖故人';
    }

    div:hover::after {
        color: red;
    }
</style>

<div>
    寒江孤影
</div>

2.3.2、伪元素选择器清除浮动原理

3、CSS3盒子模型

• CSS3可以通过box-sizing来指定盒子模型
• 有2个值：content-box、border-box
• 如果盒子模型改为了box-sizing:border-box ，那么padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）。

值	描述
box-sizing:content-box	默认值。 盒子大小为width+padding+border
box-sizing:border-box	盒子大小为width

3、CSS3其它特性

3.1、CSS3滤镜filter

• 将模糊或颜色偏移等图形效果应用于元素。

• 语法：

  filter:函数();
  

**例如：**blur模糊处理，数值越大越模糊

filter:blur(5px);

3.2、calc函数

• 语法：

  width:calc(100%-80px);
  

• 括号里面可以使用+、-、*、/进行计算

• 100%表示和父元素宽度一样，然后再减去80px。

4、CSS3过渡

4.1、CSS3过渡transition的使用

• 过渡transition是CSS3中具有颠覆性的特征之一，可以在不使用Flash动画或JavaScript情况下，当元素从一种样式变换成另一种样式时为元素添加效果。

• 虽然IE9以下版本不支持，但不会影响页面布局。

• 经常和:hover一起搭配使用

• 语法：

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

1. 属性： 想要变化的CSS属性，宽、高、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以了。
2. 花费时间： 单位是秒（必须写单位），比如0.5s
3. 运动曲线： 默认是ease（可以省略）
4. 何时开始： 单位是称（必须写单位）可以设置延迟触发时间，默认是0s。(可以省略)

注意：谁做变化给谁加过渡。

示例：

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        /* ransition:要过渡的属性 花费时间 运动曲线 何时开始； */
        transition: width .5s ease .5s;
    }

    div:hover {
        width: 400px;
    }
</style>

<div></div>

如果多个属性都过渡，利用逗号分隔
也可以用all

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        /* ransition:要过渡的属性 花费时间 运动曲线 何时开始； */
        transition: width .5s ease .5s, height .5s ease .5s;

    }

    div:hover {
        width: 500px;
        height: 500px;
    }
</style>

<div></div>

4.2、进度条

<style>
    .bar {
        width: 200px;
        height: 10px;
        border: 1px solid red;
        border-radius: 5px;
    }

    .bar_in {
        height: 100%;
        width: 50%;
        background-color: red;
        transition: width .3s ease .1s;
    }

    .bar:hover .bar_in {
        width: 100%;
    }
</style>

<div class="bar">
    <div class="bar_in"></div>
</div>

展示效果：