新增css3特性有兼容性问题,ie9+才支持
移动端支持优于pc端
新增选择器和盒子模型以及其他特性
css新增选择器
属性选择器
属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者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元素 |
【注意】类选择器、属性选择器、伪类选择器,权重为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个 |
nth-child(n)选择某个父元素的一个或多个特定的子元素
n可以是数字,关键字和公式
n如果是数字,就是选择第n个子元素,里面数字从1开始
n可以是关键字:even偶数,odd奇数
n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出元素的个数会被忽略)
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 . |
n+5 | 从第5个开始(包含第五个)到最后 |
-n+5 | 前5个(包含第5ge) |
选择符 | 简介 |
---|---|
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(n) | 指定类型e的第n个 |
【区别】nth-child对父元素里面所有孩子排序选择(序号是固定的)先找第n个孩子,然后看看是否和e匹配;nth-of-type:对父元素里面指定子元素进行排序选择。先去匹配e,然后再根据e找第n个孩子
伪元素选择器
伪元素选择器可以帮我们利用css创建新标签元素,而不需要html标签,从而简化html结构
选择符 | 简介 |
---|---|
::before | 在元素内部插入内容 |
::after | 在元素内部的后面插入内容 |
【注意】
css3盒子模型
css3图片变模糊
css3滤镜filter:
filter css属性将模糊或颜色偏移等图片效果应用于元素
filter:函数(); 例如:filter:blur(5px); blur模糊处理 数值越大越模糊
计算盒子宽度width:calc函数
width:calc(100%-80px);
css3过渡
过渡transition是css3中具有颠覆性的特征之一,我们可以在不使用flash动画或者js的情况下,当元素从一种样式变换为〇一种样式时为元素添加效果
过渡动画:是从一个状态渐渐的过渡到另一种状态
经常和:hover一起搭配使用
transition:要过渡的属性 花费的时间 运动曲线 何时开始;
值 | 说明 |
---|---|
属性 | 想要变化的css属性,宽度 高度 背景颜色 内外边距都可以。如果想要所有的属性都有变化过渡,写一个all就可以了 |
花费的时间 | 单位是 秒(必须写单位)比如0.5s |
运动曲线 | 默认时ease(可以省略) |
何时开始 | 单位时 秒 (必须写单位)可以设置延迟出发时间 默认时0s(可以省略) |
如对本文有疑问, 点击进行留言回复!!
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
网友评论