目录
1. css3的现状
新增的css3特性有兼容性问题,ie9+才支持
移动端支持由于pc端
不断改进中
应用相对广泛
现阶段主要学习:新增选择器和盒子模型以及其他特性
2. css3 新增选择器
css3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。
2.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元素 |
1.选择input且同时含有value这个属性 的标签
input[value] { }
2.属性选择我器还可以选择属性=值的某些元素 重点务必掌握的
子选择type = text 文本框的input 选取出来
input[type=text] { }
3.属性选择器可以选择属性值结尾的某些元素
section[class$="ico"] { }
其余两个同理
注意:类选择器,属性选择器,伪类选择器,权重为10
2.2 结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素。
选择符 | 简介 |
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个元素或者超出了元素的个数会被忽略)
nth-child(n)从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子
简单的公式列表
公式 | 取值 |
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15... |
n+5 | 从第5个开始(包含第5个)到最后 |
-n+5 | 前5个(包含第5个)... |
区别:
1. nth-child对父元素里面所以孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
2.nth-of-type 对父元素里面指定子元素进行选择。先去匹配E,然后在根据E找到第n个孩子
2.3 伪元素选择器
伪元素选择器可以帮助我们利用css创建新标签元素,而不需要HTML标签,从而简化HTML结构
选择符 | 简介 |
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
内容写在 content中
注意:
- before和after创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法:element::before{}
- before 和after 必须有content属性
- before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为1
伪元素应用
1.清除浮动
2.伪元素字体图标
3.仿土豆效果
3. css3盒子模型
Css3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box,border-box,
这样我们计算盒子大小的方式就发生了改变
可以分为两种情况:
1.box-sizing:content-box 盒子大小为width+padding+border(以前默认的)
2.box-sizing:border-box 盒子大小为width
如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了(前提是padding和border不会超过width宽度)
4.css3其他特性(了解)
1.图片变模糊
css3滤镜filter:
filter css属性将模糊或颜色偏移等图形效果应用于元素
filter: 函数();例如:filter:blur(5px); blir模糊处理 数值越大越模糊
2.计算盒子宽度width:calc函数
calc()此css函数让你在声明css属性值时执行一些计算
width:calc(100%-80px);
括号里面可以使用+-*/来进行计算
5. css3过渡(重点)
过渡(transition)是css3中具有颠覆性的特征之一,我们可以子啊不使用Flash动画或js的情况下,当元素从一种样式变化为另一种样式时为元素添加效果
过渡动画:是从一个状态 渐渐的过渡到另一个状态
可以让我们页面更好看,更动感十足,虽然,低版本浏览器不支持(ie9以下版本)但是不会影响我们页面布局。
我们经常搭配:hover一起 使用
transition :要过渡的属性 花费时间 运动曲线 何时开始;
1.属性:想要变化的css属性,宽度高度 背景颜色 内外边距都可以。如果想要所有属性都变化国度,写一个all就可以。
2.花费时间:单位秒(必须写单位)如 0.5s
3.运动曲线:默认ease(可以省略)
4.何时开始:单位是秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)
谁做过渡给谁加。
变化多个属性,可以使用逗号分隔