CSS3（一）

CSS3 就是最新的CSS标准，在原有的CSS基础上，新增了一些特性

只要新增了三种选择器：属性选择器、结构伪类选择器、伪元素选择器，2D、3D转换、动画、盒子模型、过渡等

1、属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助类选择器 或 id选择器 了

就是我们可以自己给标签定义的属性、属性值，不要依靠类选择器和id选择器了

2、结构伪类选择器

注意：

• nth-child 对父元素里面所有的孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配

• nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找到第n个孩子

nth-child(n) 选择某个父元素的一个或多个特定的子元素

1. n 可以是数字，关键字 和 公式
2. 如果是数字，就是选择第n个元素，里面数字从1开始
3. n 可以是关键字：even偶数，odd奇数
4. n 是公式，常见的格式：
   1. 2n：偶数
   2. 2n + 1：奇数
   3. n + 5：从第5个开始到最后一个
   4. -n + 5：前5个

总结：

1. 结构伪类选择器一般用于选择父级里面的第几个孩子
2. nth-child：先去找孩子再去匹配
3. nth-of-type：先去匹配再去找孩子
4. n 是从0开始的，但是第0个元素或者超出元素的个数会被忽略的
5. 属性选择器 和 结构伪类选择器权重都为10

3、伪元素选择器

伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化HTML结构

• ::after：在元素内部的前面插入内容
• ::before：在元素内部的后面插入内容

注意：

1. before 和 after 创建一个元素，但是属于行内元素
2. 新创建的这个元素在文档树中是找不到的，不是真正意义上的元素，所以我们称之为伪元素
3. before 和 after 必须要有 content 属性
4. 伪元素选择器和标签选择器一样，权重为 1

4、盒子模型

CSS3中可以通过 box-sizing 来指定模型，它有两个值：content-box、border-box

• content-box：盒子大小为 width + padding + border
• border-box：盒子大小为 width

所以，当我们设置了 box-sizing: border-box; 之后，padding 和 border 就不会撑大盒子了（当然前提是 padding 和 border 不会超出 width宽度）

5、过渡 transition

为元素天机一种效果，让其兄一种样式过渡到另外一种样式

经常和 :hover 一起搭配使用

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

• 属性：想要变化的CSS属性，可以是宽度、高度、颜色；如果想要所有属性都过渡，下一个all就可以（必写）
• 花费时间：单位是秒，必须写单位（必写）
• 运动曲线：默认是ease（可以省略）
• 何时开始：单位是秒，必须写单位，默认是 0s

<style>
    div {
        width: 200px;
        height: 80px;
        background-color: pink;
        /* 如果要添加多个属性，用逗号(,) 隔开 */
        transition: width .5s, height .5s;
        /* 想要添加所有的属性，直接用all就行 */
        /* transition: all .5s; */
    }
    div:hover {
        width: 400px;
        height: 160px;
        background-color: skyblue;
    }
</style>