02 CSS3新特性

CSS3的现状

• 新增的CSS3特性有兼容性问题， ie9+才支持
• 移动端支持优于PC端
• 不断改进中
• 应用相对广泛
• 现阶段主要学习：新增选择器和盒子模型以及其他特性

CSS3新增选择器

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

注意：类选择器， 属性选择器， 伪类选择器， 权重为10

1. 属性选择器

属性选择器可以根据元素特定的属性来选择元素。 这样就可以不用借助类或者id选择器
用中括号[]

• 权重为10

下面权重为11 标签选择器+属性选择器

input[value] {
    color: red;
}

选择符	简介
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元素

2. 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素, 常用于根据父级选择里面的子元素

• 权重为10

选择符	简介
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个

注意要加括号:(重点)

• E:nth-child(n)选择某个父元素的一个或多个特定的子元素
• n可以是数字, 关键字和公式
• n如果是数字, 就是选择第n个元素
• n可以是关键字: even偶数, odd奇数
• n可以是公式: 常见的公式如下
  • 如果n是公式, 则从0开始计算, 但是第0个元素或者超出了元素的个数会被忽略

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

ul li:nth-child(2) {
    color: red;
}

区别:

• nth-child: 会把所有的盒子都排列序号
• nth-of-type: 对父元素里面指定子元素进行排序选择, 先去匹配E, 然后再根据E找第n个孩子

/* 无效 */
section div:nth-child(1) {
    background-color: royalblue;
}
/* 小兔子背景变蓝 */
section div:nth-of-type(1) {
    background-color: royalblue;
}

<section>
    <p>小熊</p>
    <div>小兔子</div>
    <div>大猩猩</div>
</section>

3. 伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素, 而不需要HTML标签, 从而简化HTML结构
注意 伪元素选择器有两个冒号::

• 权重为1

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

注意:

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

4. 伪元素使用场景

1. 伪元素字体图标

.test1::after {
    position: absolute;
    right: 10px;
    /* content: ''; */
    content: '\ea42';
    font-family: 'icomoon';
}

2. 仿土豆效果

.box:hover::after{
    display: block;
}

3. 伪元素清除浮动
   

下面的不能用display:block; 会导致before和after不在同一行, 所以要display: table;

5. CSS3盒子模型

CSS3中可以通过box-sizing来指定盒子模型, 有两个值: 即可指定为content-box, border-box, 这样我们计算盒子大小的方式就发生了改变
可以分成两种情况:

• box-sizing: content-box; 盒子大小为width + padding + border(以前默认的)
• box-sizing: border-box; 盒子大小为width

如果盒子模型我们改为了box-sizing: border-box;, 那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

6. CSS3其它特性

1. 图片变模糊
2. 计算盒子宽度width: calc函数

1. 图片变模糊

CSS3滤镜filter:
filter 将模糊或颜色偏移等图像效果应用于元素
语法:
filter: 函数(); 例如: filter: blur(5px); blur模糊处理, 数值越大越模糊

2. CSS3 calc函数

calc() 在声明CSS属性值时执行一些计算
语法:
width: calc(100% - 80px);
括号里面可以使用+ - * /来进行计算

7. CSS3过渡(重点)

过渡(transition)是CSS3中具有颠覆性的特征之一, 我们可以在不适用Flash动画或JavaScript的情况下, 当元素从一种样式变换到另一种样式时为元素添加效果

• 过渡动画: 是从一个状态渐渐地过渡到另外一个状态
• 可以让我们页面更好看, 更动感十足, 虽然低版本浏览器不支持(ie9以下版本), 三十不会影响页面布局
  我们现在经常和:hover一起搭配使用
  语法:
  transition: 要过渡的属性 花费时间 运动曲线 延时时间;

1. 属性: 想要变化的css属性, 宽度高度/背景颜色/内外边距都可以. 如果想要所有的属性都变化过度, 写一个all就可以
2. 花费时间: 单位是秒(必须写单位) 比如0.5s
3. 运动曲线: 默认ease (可以省略)
4. 延时时间: 单位是秒(必须写单位), 可以设置延迟触发事件, 默认是0s(可以省略)

• 谁做过渡, 给谁加!
• 多个属性 transition: width 2s, height 2s; 中间用逗号隔开即可

进度条案例

1. 进度条如何布局
2. 过渡的使用