一、CSS3现状
- 新增的CSS3特性有兼容性问题,ie9+才支持
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
二、CSS3新增选择器
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
1.属性选择器
属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或id选择器。
选择符 | 简介 |
---|---|
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.结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个元素 |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type | 指定类型E的第n个 |
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和Epipei
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子
- 如果是无序列表,用nth-child
- 类选择器,属性选择器,伪类选择器,权重为10
2.1 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
选择符 | 简介 |
---|---|
:: before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
- before和after创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法:element::before{}
- before 在父元素内容的前面创建元素,after在元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为1
3.盒子模型
CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为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宽度)
4.CSS3其他特性
4.1 CSS3滤镜filter:
filterCSS属性将模糊或颜色偏移等图形效果应用于元素
filter: 函数(); filter:blur(5px); blur模糊处理 数值越大越模糊
4.2 CSS3 calc函数
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100%-80%);
括号里面可以使用 + - * / 来计算。
4.3 CSS3过渡
过渡是CSS3中具有颠覆性的特征之一,我们可以在不适用Flash动画或JavaScript的情况下,当元素从一种样式变换到另一种样式时为元素添加效果。
过渡动画:是从一个状态渐渐的过渡到另外一个状态
ie9以下不支持,但不会影响布局
transition:要过渡的属性 花费时间 运动曲线 何时开始;
- 属性:想要变化的CSS属性,宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过度,写一个all就可以。
- 花费时间:单位是秒,如0.5s
- 运动曲线:默认是ease(可省略)
- 何时开始:单位是秒可以设置延迟时间默认是0s(可省略)
其余详尽文档