CSS学习第八篇
- [1. CSS新增属性选择器](#1. CSS新增属性选择器)
- [2. CSS新增结构伪类选择器](#2. CSS新增结构伪类选择器)
-
- [2.1 选择第n个元素](#2.1 选择第n个元素)
- [2.2 CSS新增nth-child选择器](#2.2 CSS新增nth-child选择器)
- [2.3 nth-child和nth-of-type的区别](#2.3 nth-child和nth-of-type的区别)
- [3. CSS新增伪元素选择器](#3. CSS新增伪元素选择器)
-
- [3.1 使用场景和由来](#3.1 使用场景和由来)
- [3.2 基本使用](#3.2 基本使用)
- [3.3 使用场景](#3.3 使用场景)
- [4. CSS盒子模型border-box](#4. CSS盒子模型border-box)
- [5. CSS3图片模糊处理](#5. CSS3图片模糊处理)
- [6. 计算盒子宽度calc函数](#6. 计算盒子宽度calc函数)
- [7. CSS新增属性过渡](#7. CSS新增属性过渡)
- [8. 广义的H5](#8. 广义的H5)
1. CSS新增属性选择器
CSS3的现状：
CSS3新增选择器：
我们先来介绍属性选择器 。
（1）利用属性选择器就可以不用借助于类或者id选择器
（2）属性选择器还可以选择属性=值的某些元素
（3）属性选择器可以选择属性值开头的某些元素
（4）属性选择器可以选择属性值结尾的某些元素
（5）属性选择器可以选择有特定属性值的某些元素
注意：
2. CSS新增结构伪类选择器
2.1 选择第n个元素
总的学习目录：
实操：其他同理。
2.2 CSS新增nth-child选择器
注意以下重点：
关键字：
公式：实操：
还有其他公式：
2.3 nth-child和nth-of-type的区别
区别如下：
实操：:nth-child
:nth-of-type
小结：
3. CSS新增伪元素选择器
3.1 使用场景和由来
嵌套标签会让html结构变得难看
伪元素选择器：
3.2 基本使用
基本使用：
实操：
3.3 使用场景
（1）配合字体图标（盒子里的下拉箭头，用的是after）
（2）仿土豆效果实操：
（3）伪元素清除浮动本质复习一下：额外标签法
伪元素法：借助伪元素选择器，生成一个新的盒子。（本质上还是额外标签法）
双伪元素：（闭合）
4. CSS盒子模型border-box
前后区别：
实操：
5. CSS3图片模糊处理
fliter
CSS3图片模糊处理
实操：
6. 计算盒子宽度calc函数
calc函数：
实操：
7. CSS新增属性过渡
过渡：（缓缓变化）
过渡语法：
实操：
高度、宽度都要变：
all：（变化的写在hover里了）
小练习：进度条实操：
8. 广义的H5
狭义的H5：
广义的H5：
